### Development Start Command

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/core/README.md

Starts a development server to preview code examples.

```bash
npm run start     # Preview code example.
```

--------------------------------

### Provider Component Example

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/API_SURFACE.md

Example of advanced usage for the Provider component, demonstrating how to initialize it with an initial state.

```jsx
<Provider init={{ activeKey: 'tab-1', data: [] }}>
  {/* Components with useDataContext */}
</Provider>
```

--------------------------------

### Install react-tabs-draggable

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/README.md

Install the package using npm. This package is not dependent on uiw.

```bash
npm install @uiw/react-tabs-draggable --save
```

--------------------------------

### Development Commands

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/README.md

Commands for watching type files and previewing the code example during development.

```bash
npm run watch     # Listen create type and .tsx files.
```

```bash
npm run start     # Preview code example.
```

--------------------------------

### Basic Usage Example

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/tabs.md

Demonstrates how to use the Tabs component with basic active key management and styling.

```APIDOC
## Basic Usage

```jsx
import React, { useState } from 'react';
import Tabs, { Tab } from '@uiw/react-tabs-draggable';

function App() {
  const [activeKey, setActiveKey] = useState('tab-1');

  return (
    <Tabs 
      activeKey={activeKey}
      onTabClick={(id) => setActiveKey(id)}
      style={{ gap: 12 }}
    >
      <Tab id="tab-1">Home</Tab>
      <Tab id="tab-2">Settings</Tab>
      <Tab id="tab-3">About</Tab>
    </Tabs>
  );
}
```
```

--------------------------------

### Advanced Manual Tabs Setup

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/entry-point.md

This advanced setup is not recommended for general use as it requires manual configuration of React DnD and the component's Provider. Use this only if you need fine-grained control over the drag-and-drop context.

```jsx
import { Tabs as TabsComponent, Provider } from '@uiw/react-tabs-draggable';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

<DndProvider backend={HTML5Backend} context={window}>
  <Provider init={{ activeKey, onTabClick, onTabDrop, data: [] }}>
    <TabsComponent activeKey={activeKey}>
      <Tab id="tab-1">Home</Tab>
    </TabsComponent>
  </Provider>
</DndProvider>
```

--------------------------------

### onTabDrop Example

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/API_SURFACE.md

Example usage of the onTabDrop callback to log the dropped tab information and reorder the tabs.

```jsx
onTabDrop={(id, newIndex, coords) => {
  console.log(`Tab ${id} dropped at index ${newIndex}`);
  reorderTabs(id, newIndex);
}}
```

--------------------------------

### With Drop Handling Example

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/tabs.md

Illustrates how to implement drag-and-drop functionality for reordering tabs using the `onTabDrop` prop.

```APIDOC
## With Drop Handling

```jsx
import React, { useState } from 'react';
import Tabs, { Tab } from '@uiw/react-tabs-draggable';

function App() {
  const [tabs, setTabs] = useState([
    { id: 'tab-1', label: 'Home' },
    { id: 'tab-2', label: 'Settings' },
  ]);
  const [activeKey, setActiveKey] = useState('tab-1');

  const handleTabDrop = (draggedId, newIndex) => {
    const oldIndex = tabs.findIndex((t) => t.id === draggedId);
    const newTabs = [...tabs];
    const [removed] = newTabs.splice(oldIndex, 1);
    newTabs.splice(newIndex, 0, removed);
    setTabs(newTabs);
  };

  return (
    <Tabs 
      activeKey={activeKey}
      onTabClick={(id) => setActiveKey(id)}
      onTabDrop={handleTabDrop}
    >
      {tabs.map((tab) => (
        <Tab key={tab.id} id={tab.id}>
          {tab.label}
        </Tab>
      ))}
    </Tabs>
  );
}
```
```

--------------------------------

### TypeScript Example with Tabs Component

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/QUICK_START.md

This example demonstrates how to use the Tabs component with TypeScript, including state management for active keys and tab items, and handling tab click and drop events.

```typescript
import React, { useState } from 'react';
import Tabs, { Tab, TabsProps, TabProps } from '@uiw/react-tabs-draggable';

interface MyTabItem {
  id: string;
  label: string;
}

function App() {
  const [activeKey, setActiveKey] = useState<string>('tab-1');
  const [tabs, setTabs] = useState<MyTabItem[]>([
    { id: 'tab-1', label: 'Home' },
  ]);

  const handleTabClick: TabsProps['onTabClick'] = (id) => {
    setActiveKey(id);
  };

  const handleTabDrop: TabsProps['onTabDrop'] = (id, index) => {
    if (index === undefined) return;
    // Reorder tabs
  };

  return (
    <Tabs 
      activeKey={activeKey}
      onTabClick={handleTabClick}
      onTabDrop={handleTabDrop}
    >
      {tabs.map((tab) => (
        <Tab key={tab.id} id={tab.id}>
          {tab.label}
        </Tab>
      ))}
    </Tabs>
  );
}

export default App;
```

--------------------------------

### Add and Close Tab Functionality

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/core/README.md

This example demonstrates how to add new tabs dynamically and close existing tabs. It utilizes React state to manage the tab data and event handlers for add and close actions. Ensure you have styled-components installed for the custom tab styling.

```jsx
import React, { Fragment, useState, useCallback } from 'react';
import Tabs, { Tab, useDataContext } from '@uiw/react-tabs-draggable';
import styled from 'styled-components';

const TabWarp = styled(Tabs)`
  max-width: 450px;
  border-bottom: 1px solid #333;
  margin-bottom: -2px;
  gap: 3px;
`;

const TabItem = styled(Tab)`
  background-color: #b9b9b9;
  padding: 3px 7px;
  border-radius: 5px 5px 0 0;
  user-select: none;
  flex-wrap: nowrap;
  overflow: hidden;
  word-break: keep-all;
  align-items: center;
  display: flex;
  position: relative;
  flex-direction: row;
  &.w-active {
    color: #fff;
    background-color: #333;
  }
`;

function insertAndShift(arr, from, to) {
  let cutOut = arr.splice(from, 1)[0];
  arr.splice(to, 0, cutOut);
  return arr;
}

let count = 9;

function App() {
  const [data, setData] = useState([
    { id: 'tab-4-1', children: 'Google' },
    { id: 'tab-4-2', children: 'MicroSoft' },
    { id: 'tab-4-3', children: 'Baidu' },
    { id: 'tab-4-4', children: 'Taobao' },
    { id: 'tab-4-5', children: 'JD' },
    { id: 'tab-4-6', children: 'Apple' },
    { id: 'tab-4-7', children: 'Bing' },
    { id: 'tab-4-8', children: 'Gmail' },
    { id: 'tab-4-9', children: 'Gitter' },
  ]);
  const [test, setTest] = useState(1);
  const [activeKey, setActiveKey] = useState('');

  const tabClick = (id, evn) => {
    evn.stopPropagation();
    setActiveKey(id);
    setTest(test + 1);
  };
  const closeHandle = (item, evn) => {
    evn.stopPropagation();
    setData(data.filter((m) => m.id !== item.id));
  };
  const addHandle = () => {
    ++count;
    const newData = [...data, { id: `tab-3-${count}`, children: `New Tab ${count}` }];
    setData(newData);
  };
  const tabDrop = (id, index, offset) => {
    const oldIndex = [...data].findIndex((m) => m.id === id);
    const newData = insertAndShift([...data], oldIndex, index);
    setData(newData);
  };
  return (
    <Fragment>
      <button onClick={addHandle}>Add{count}</button>
      <TabWarp
        onTabClick={(id, evn) => tabClick(id, evn)}
        onTabDrop={(id, index, offset) => tabDrop(id, index, offset)}
      >
        {data.map((m, idx) => {
          return (
            <TabItem key={idx} id={m.id}>
              {m.children}
              <button onClick={(evn) => closeHandle(m, evn)}>x</button>
            </TabItem>
          );
        })}
      </TabWarp>
      <div>{activeKey}</div>
    </Fragment>
  );
}
export default App;

```

--------------------------------

### Add and Close Tab Example

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/README.md

This example demonstrates how to add new tabs and close existing ones in a draggable tab interface. It utilizes React state to manage the tab data and includes custom styling for the tab components. Use this snippet to implement dynamic tab management in your application.

```jsx
import React, { Fragment, useState, useCallback } from 'react';
import Tabs, { Tab, useDataContext } from '@uiw/react-tabs-draggable';
import styled from 'styled-components';

const TabWarp = styled(Tabs)`
  max-width: 450px;
  border-bottom: 1px solid #333;
  margin-bottom: -2px;
  gap: 3px;
`;

const TabItem = styled(Tab)`
  background-color: #b9b9b9;
  padding: 3px 7px;
  border-radius: 5px 5px 0 0;
  user-select: none;
  flex-wrap: nowrap;
  overflow: hidden;
  word-break: keep-all;
  align-items: center;
  display: flex;
  position: relative;
  flex-direction: row;
  &.w-active {
    color: #fff;
    background-color: #333;
  }
`;

function insertAndShift(arr, from, to) {
  let cutOut = arr.splice(from, 1)[0];
  arr.splice(to, 0, cutOut);
  return arr;
}

let count = 9;

function App() {
  const [data, setData] = useState([
    { id: 'tab-4-1', children: 'Google' },
    { id: 'tab-4-2', children: 'MicroSoft' },
    { id: 'tab-4-3', children: 'Baidu' },
    { id: 'tab-4-4', children: 'Taobao' },
    { id: 'tab-4-5', children: 'JD' },
    { id: 'tab-4-6', children: 'Apple' },
    { id: 'tab-4-7', children: 'Bing' },
    { id: 'tab-4-8', children: 'Gmail' },
    { id: 'tab-4-9', children: 'Gitter' },
  ]);
  const [test, setTest] = useState(1);
  const [activeKey, setActiveKey] = useState('');

  const tabClick = (id, evn) => {
    evn.stopPropagation();
    setActiveKey(id);
    setTest(test + 1);
  };
  const closeHandle = (item, evn) => {
    evn.stopPropagation();
    setData(data.filter((m) => m.id !== item.id));
  };
  const addHandle = () => {
    ++count;
    const newData = [...data, { id: `tab-3-${count}`, children: `New Tab ${count}` }];
    setData(newData);
  };
  const tabDrop = (id, index, offset) => {
    const oldIndex = [...data].findIndex((m) => m.id === id);
    const newData = insertAndShift([...data], oldIndex, index);
    setData(newData);
  };
  return (
    <Fragment>
      <button onClick={addHandle}>Add{count}</button>
      <TabWarp
        onTabClick={(id, evn) => tabClick(id, evn)}
        onTabDrop={(id, index, offset) => tabDrop(id, index, offset)}
      >
        {data.map((m, idx) => {
          return (
            <TabItem key={idx} id={m.id}>
              {m.children}
              <button onClick={(evn) => closeHandle(m, evn)}>x</button>
            </TabItem>
          );
        })}
      </TabWarp>
      <div>{activeKey}</div>
    </Fragment>
  );
}
export default App;
```

--------------------------------

### Development Commands

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/overview.md

Common npm commands for development, including watching files, starting a server, building the library, and running tests.

```bash
npm run watch
```

```bash
npm run start
```

```bash
npm run build
```

```bash
npm run test
```

--------------------------------

### onTabClick Example

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/API_SURFACE.md

Example usage of the onTabClick callback to log the clicked tab ID and update the active tab state.

```jsx
onTabClick={(id, event) => {
  console.log('Clicked tab:', id);
  setActiveKey(id);
}}
```

--------------------------------

### Basic Tabs Component Usage

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/MANIFEST.txt

Demonstrates the basic usage of the Tabs component. Ensure you have installed the package and imported the necessary components.

```jsx
import React from 'react';
import { Tabs, Tab } from '@uiw/react-tabs-draggable';

function App() {
  return (
    <Tabs>
      <Tab label="Tab 1">Content 1</Tab>
      <Tab label="Tab 2">Content 2</Tab>
      <Tab label="Tab 3">Content 3</Tab>
    </Tabs>
  );
}

export default App;
```

--------------------------------

### Development Watch Command

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/core/README.md

Starts a watch process to listen for changes in type and TSX files during development.

```bash
npm run watch     # Listen create type and .tsx files.
```

--------------------------------

### Add and Close Tabs Dynamically

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/README.md

This example demonstrates how to dynamically add new tabs and close existing ones. It includes functionality for reordering tabs via drag and drop and managing the active tab.

```jsx
import React, { Fragment, useState, useCallback } from 'react';
import Tabs, { Tab, useDataContext } from '@uiw/react-tabs-draggable';
import styled from 'styled-components';

const TabWarp = styled(Tabs)`
  max-width: 450px;
  border-bottom: 1px solid #333;
  margin-bottom: -2px;
  &:hover::-webkit-scrollbar {
    height: 0px;
    background-color: red;
  }
  &:hover::-webkit-scrollbar-track {
    background-color: #333;
  }
  &:hover::-webkit-scrollbar-thumb {
    background-color: green;
  }
`;

const TabItem = styled(Tab)`
  background-color: #b9b9b9;
  padding: 3px 7px;
  border-radius: 5px 5px 0 0;
  user-select: none;
  &.w-active {
    color: #fff;
    background-color: #333;
  }
`;

function insertAndShift(arr, from, to) {
  let cutOut = arr.splice(from, 1)[0];
  arr.splice(to, 0, cutOut);
  return arr;
}

let count = 9;

function App() {
  const [data, setData] = useState([
    { id: 'tab-4-1', children: 'Google' },
    { id: 'tab-4-2', children: 'MicroSoft' },
    { id: 'tab-4-3', children: 'Baidu' },
    { id: 'tab-4-4', children: 'Taobao' },
    { id: 'tab-4-5', children: 'JD' },
    { id: 'tab-4-6', children: 'Apple' },
    { id: 'tab-4-7', children: 'Bing' },
    { id: 'tab-4-8', children: 'Gmail' },
    { id: 'tab-4-9', children: 'Gitter' },
  ]);
  const [test, setTest] = useState(1);
  const [activeKey, setActiveKey] = useState('');

  const tabClick = (id, evn) => {
    evn.stopPropagation();
    setActiveKey(id);
    setTest(test + 1);
  };
  const closeHandle = (item, evn) => {
    evn.stopPropagation();
    const idx = data.findIndex((m) => m.id === item.id);

    let active = '';
    if (idx > -1 && activeKey) {
      active = data[idx - 1] ? data[idx - 1].id : data[idx].id;
      setActiveKey(active || '');
    }
    setData(data.filter((m) => m.id !== item.id));
  };
  const addHandle = () => {
    ++count;
    const newData = [...data, { id: `tab-3-${count}`, children: `New Tab ${count}` }];
    setData(newData);
  };
  const tabDrop = (id, index) => {
    const oldIndex = [...data].findIndex((m) => m.id === id);
    const newData = insertAndShift([...data], oldIndex, index);
    setData(newData);
  };
  return (
    <Fragment>
      <button onClick={addHandle}>Add{count}</button>
      <TabWarp
        activeKey={activeKey}
        style={{ gap: 3, overflow: 'auto' }}
        onTabClick={(id, evn) => tabClick(id, evn)}
        onTabDrop={(id, index) => tabDrop(id, index)}
      >
        {data.map((m, idx) => {
          return (
            <TabItem key={idx} id={m.id} draggable={idx !== 0}>
              {m.children}
              <button onClick={(evn) => closeHandle(m, evn)}>x</button>
            </TabItem>
          );
        })}
      </TabWarp>
      <div>{activeKey}</div>
    </Fragment>
  );
}
export default App;

```

--------------------------------

### Tabs with Drag and Drop Handling

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/MANIFEST.txt

Shows how to enable drag and drop functionality for tabs. This requires additional setup for drag and drop handlers.

```jsx
import React from 'react';
import { Tabs, Tab } from '@uiw/react-tabs-draggable';

function App() {
  const handleDrop = (event, dragIndex, hoverIndex) => {
    console.log('Dropped:', dragIndex, hoverIndex);
    // Implement reordering logic here
  };

  return (
    <Tabs onDrop={handleDrop}>
      <Tab label="Tab 1" draggable>Content 1</Tab>
      <Tab label="Tab 2" draggable>Content 2</Tab>
      <Tab label="Tab 3" draggable>Content 3</Tab>
    </Tabs>
  );
}

export default App;
```

--------------------------------

### Access Context with useDataContext

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/API_SURFACE.md

Example of using the useDataContext hook to get the active tab key and dispatch function.

```jsx
const { activeKey, dispatch } = useDataContext();
```

--------------------------------

### Tabs with Click Handler

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/entry-point.md

Shows how to handle tab clicks using the onTabClick prop. This example uses useState to manage the active tab's key.

```jsx
import React, { useState } from 'react';
import Tabs, { Tab } from '@uiw/react-tabs-draggable';

function App() {
  const [activeKey, setActiveKey] = useState('tab-1');

  return (
    <Tabs 
      activeKey={activeKey}
      onTabClick={(id) => setActiveKey(id)}
    >
      <Tab id="tab-1">Home</Tab>
      <Tab id="tab-2">Settings</Tab>
    </Tabs>
  );
}
```

--------------------------------

### Basic Tabs Usage

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/tabs.md

Shows a simple example of how to use the Tabs component with a few Tab children. Manages the active tab state using useState and onTabClick.

```jsx
import React, { useState } from 'react';
import Tabs, { Tab } from '@uiw/react-tabs-draggable';

function App() {
  const [activeKey, setActiveKey] = useState('tab-1');

  return (
    <Tabs 
      activeKey={activeKey}
      onTabClick={(id) => setActiveKey(id)}
      style={{ gap: 12 }}
    >
      <Tab id="tab-1">Home</Tab>
      <Tab id="tab-2">Settings</Tab>
      <Tab id="tab-3">About</Tab>
    </Tabs>
  );
}
```

--------------------------------

### Custom Provider Initialization

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/configuration.md

Use the Provider component directly from core/src/store.tsx for custom context initialization. This allows for custom state management setup before rendering tab components.

```jsx
import { Provider } from '@uiw/react-tabs-draggable';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

function CustomApp() {
  const [activeKey, setActiveKey] = useState('tab-1');
  const [tabData, setTabData] = useState([]);

  const handleTabClick = (id) => setActiveKey(id);
  const handleTabDrop = (id, index) => {
    // Update tabData
  };

  return (
    <DndProvider backend={HTML5Backend} context={window}>
      <Provider init={{
        activeKey,
        data: tabData,
        onTabClick: handleTabClick,
        onTabDrop: handleTabDrop
      }}>
        {/* Your tab components */}
      </Provider>
    </DndProvider>
  );
}
```

--------------------------------

### Render Tabs with TabContainer

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/API_SURFACE.md

Example of using the Tabs component to manage active tabs and render individual Tab components.

```jsx
<Tabs activeKey="tab-1" onTabClick={(id) => setActive(id)}>
  <Tab id="tab-1">Home</Tab>
</Tabs>
```

--------------------------------

### Create Stable Callback with useEventCallback

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/API_SURFACE.md

Example of using the useEventCallback hook to create a stable callback reference for a function.

```jsx
const stableCallback = useEventCallback(onPropertyChange);
```

--------------------------------

### Item Function for Drag Start

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/drag-drop-internals.md

This function is called when a drag operation begins. It returns the data associated with the drag item, including its ID and index.

```typescript
item: () => {
  return { id, index };
}
```

--------------------------------

### Styling Tabs with styled-components

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/configuration.md

Customize the tabs component using styled-components for a more integrated styling approach within React applications. This example demonstrates how to style the Tabs container and Tab elements.

```jsx
import styled from 'styled-components';
import Tabs, { Tab } from '@uiw/react-tabs-draggable';

const StyledTabs = styled(Tabs)`
  gap: 8px;
  padding: 4px;
  border-bottom: 2px solid #333;
  background-color: #f5f5f5;
`;

const StyledTab = styled(Tab)`
  padding: 8px 16px;
  background-color: #ddd;
  border-radius: 4px 4px 0 0;
  cursor: move;
  transition: background-color 0.2s;

  &:hover {
    background-color: #ccc;
  }

  &.w-active {
    background-color: #0066cc;
    color: white;
    font-weight: bold;
  }
`;

function App() {
  return (
    <StyledTabs activeKey={activeKey} onTabClick={setActiveKey}>
      <StyledTab id="tab-1">Home</StyledTab>
      <StyledTab id="tab-2">Settings</StyledTab>
    </StyledTabs>
  );
}
```

--------------------------------

### Add Dynamic Tabs

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/QUICK_START.md

Dynamically add new tabs to the component by updating the tabs state. This example shows how to add a new tab with a unique ID and label when a button is clicked.

```jsx
const [tabs, setTabs] = useState([]);

const addTab = () => {
  setTabs([
    ...tabs,
    { id: `tab-${Date.now()}`, label: `New Tab` },
  ]);
};

return (
  <>
    <button onClick={addTab}>Add Tab</button>
    <Tabs>
      {tabs.map((tab) => (
        <Tab key={tab.id} id={tab.id}>
          {tab.label}
        </Tab>
      ))}
    </Tabs>
  </>
);
```

--------------------------------

### Initialize DndProvider with HTML5 Backend

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/drag-drop-internals.md

Initialize the DndProvider with the HTML5 backend. The `context={window}` parameter is often optional but recommended for compatibility with shadow DOMs.

```typescript
<DndProvider backend={HTML5Backend} context={window}>
```

--------------------------------

### Project File Structure

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/INDEX.md

Overview of the directory and file organization within the react-tabs-draggable repository.

```bash
core/
├── src/
│   ├── index.tsx       (Entry point, TabContainer wrapper)
│   ├── Tabs.tsx        (Tabs container component)
│   ├── Tab.tsx         (Tab item, drag-drop logic)
│   ├── hooks.ts        (useEventCallback, useDataContext)
│   ├── store.tsx       (Context, Provider, state management)
│   └── tsconfig.json
├── package.json
└── README.md
```

--------------------------------

### Development Commands

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/INDEX.md

Common commands for developing and building the react-tabs-draggable project.

```bash
npm run watch    # Build on file changes
npm run build    # Production build
npm run start    # Start demo server
npm run test     # Run tests
```

--------------------------------

### Basic Provider Usage

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/store-context.md

Demonstrates how to wrap your application with the Provider component and integrate it with react-dnd for drag-and-drop functionality.

```jsx
import { Provider, useDataContext } from '@uiw/react-tabs-draggable';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

function CustomApp() {
  const [activeKey, setActiveKey] = useState('tab-1');

  const handleTabClick = (id) => setActiveKey(id);
  const handleTabDrop = (id, newIndex) => {
    console.log(`Tab ${id} moved to index ${newIndex}`);
  };

  return (
    <DndProvider backend={HTML5Backend} context={window}>
      <Provider 
        init={{
          activeKey,
          data: [],
          onTabClick: handleTabClick,
          onTabDrop: handleTabDrop,
        }}
      >
        {/* Tab components go here */}
      </Provider>
    </DndProvider>
  );
}
```

--------------------------------

### Basic Tab Implementation

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/QUICK_START.md

Demonstrates how to render a simple set of tabs using the Tabs and Tab components. Manage the active tab state with useState.

```jsx
import React, { useState } from 'react';
import Tabs, { Tab } from '@uiw/react-tabs-draggable';

function App() {
  const [activeKey, setActiveKey] = useState('tab-1');

  return (
    <Tabs 
      activeKey={activeKey} 
      onTabClick={(id) => setActiveKey(id)}
      style={{ gap: 12 }}
    >
      <Tab id="tab-1">Home</Tab>
      <Tab id="tab-2">Settings</Tab>
      <Tab id="tab-3">About</Tab>
    </Tabs>
  );
}

export default App;
```

--------------------------------

### Basic Tabs with Click Handling

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/overview.md

Implement basic tab navigation by managing the active tab's key state. Use the `onTabClick` prop to update the active tab.

```jsx
import React, { useState } from 'react';
import Tabs, { Tab } from '@uiw/react-tabs-draggable';

function App() {
  const [activeKey, setActiveKey] = useState('tab-1');

  return (
    <Tabs activeKey={activeKey} onTabClick={(id) => setActiveKey(id)}>
      <Tab id="tab-1">Home</Tab>
      <Tab id="tab-2">Settings</Tab>
      <Tab id="tab-3">About</Tab>
    </Tabs>
  );
}
```

--------------------------------

### Callback Signatures

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/MANIFEST.txt

Documentation for callback functions that can be provided by the user to handle events.

```APIDOC
## Callback Signatures

These are the signatures for callback functions that can be passed to the components to handle specific events.

### onTabClick handler

Signature for a function that handles tab click events.

### onTabDrop handler

Signature for a function that handles tab drop events during drag-and-drop.
```

--------------------------------

### Drag and Drop API Configuration

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/API_SURFACE.md

Illustrates the configuration for `useDrag` and `useDrop` hooks, specifying the item type, drag item structure, and drop target behavior. Use `ItemTypes.Tab` for tab dragging.

```typescript
useDrag
├── type: ItemTypes.Tab
├── item: () => DragItem
└── end: (item, monitor) => onTabDrop()

useDrop
├── accept: ItemTypes.Tab
├── hover: (item, monitor) => reorder
└── collect: (monitor) => { handlerId }
```

--------------------------------

### Drag and Drop Internals - Reordering with immutability-helper

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/MANIFEST.txt

Demonstrates how `immutability-helper` can be used with `useDrop` to efficiently reorder items in an immutable way. This is a common pattern for managing state updates during drag and drop.

```javascript
import update from 'immutability-helper';

// Inside the drop handler of useDrop:
const [{ isOver }, drop] = useDrop({
  accept: 'TAB',
  drop: (item, monitor) => {
    const dragIndex = item.index;
    const hoverIndex = index; // Current item's index

    if (dragIndex === hoverIndex) {
      return;
    }

    // Update state immutably
    const newTabs = update(tabs, {
      $splice: [
        [dragIndex, 1],
        [hoverIndex, 0, tabs[dragIndex]],
      ],
    });
    setTabs(newTabs);
  },
  collect: (monitor) => ({ isOver: monitor.isOver() }),
});
```

--------------------------------

### Provider Internal State Initialization

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/API_SURFACE.md

Details the initial state structure for the `Provider` component, which is used internally for context management. This includes `activeKey`, `data`, and callback functions.

```typescript
Provider (automatic)
├── init: InitialState
│   ├── activeKey: string
│   ├── data: TabData[]
│   ├── onTabClick: Function
│   └── onTabDrop: Function
│
├── Context (React.Context)
│   └── value: CreateContext
│       ├── state: Partial<InitialState>
│       └── dispatch: Dispatch<InitialState>
│
└── useReducer(reducer, init)
    └── reducer: (state, action) => merged
```

--------------------------------

### Import Tabs Component

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/tabs.md

Demonstrates how to import the Tabs component from the library. You can use the default import or an aliased import.

```typescript
import Tabs from '@uiw/react-tabs-draggable';
// or
import { default as Tabs } from '@uiw/react-tabs-draggable';
```

--------------------------------

### Initial State Constant

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/API_SURFACE.md

The default initial state object for the library's state management. It includes `activeKey` and `data` properties.

```typescript
export const initialState: InitialState = {
  activeKey: '',
  data: [],
}
```

--------------------------------

### Basic Tab Component

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/tab.md

Demonstrates how to render a basic tab using the Tab component. Ensure the Tab component is imported from '@uiw/react-tabs-draggable'.

```jsx
import { Tab } from '@uiw/react-tabs-draggable';

function MyTabs() {
  return (
    <Tab id="tab-1">
      Home
    </Tab>
  );
}
```

--------------------------------

### Tabs with Custom Styling

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/entry-point.md

Demonstrates how to apply custom styles to the Tabs component using the style prop and className prop for CSS classes.

```jsx
import Tabs, { Tab } from '@uiw/react-tabs-draggable';

function App() {
  return (
    <Tabs 
      style={{ gap: 12, padding: 8, backgroundColor: '#f0f0f0' }}
      className="my-custom-tabs"
    >
      <Tab id="tab-1">Home</Tab>
      <Tab id="tab-2">Settings</Tab>
    </Tabs>
  );
}
```

--------------------------------

### Provider Component for Context

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/MANIFEST.txt

Demonstrates the usage of the Provider component, which is essential for making the data context available to child components. This is typically used at a higher level in the component tree.

```jsx
import React from 'react';
import { Provider } from '@uiw/react-tabs-draggable';
import Tabs from './Tabs'; // Assuming Tabs component is imported from elsewhere

function App() {
  const initialState = {
    tabs: [
      { label: 'Initial Tab 1', content: 'Initial Content 1' },
      { label: 'Initial Tab 2', content: 'Initial Content 2' },
    ],
  };

  return (
    <Provider initialState={initialState}>
      <Tabs />
      {/* Other components that might use useDataContext */}
    </Provider>
  );
}

export default App;
```

--------------------------------

### Provider Component Import

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/store-context.md

Import the Provider component from the library.

```typescript
import { Provider } from '@uiw/react-tabs-draggable';
```

--------------------------------

### Basic Tabs Usage

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/entry-point.md

Demonstrates the basic usage of the Tabs component. Import Tabs and Tab from '@uiw/react-tabs-draggable' and render them with at least one Tab.

```jsx
import Tabs, { Tab } from '@uiw/react-tabs-draggable';

function App() {
  return (
    <Tabs activeKey="tab-1">
      <Tab id="tab-1">Home</Tab>
      <Tab id="tab-2">Settings</Tab>
    </Tabs>
  );
}
```

--------------------------------

### Using useEventCallback Hook

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/MANIFEST.txt

Demonstrates the use of the `useEventCallback` hook, which provides a stable reference to the latest function. Useful for callbacks in event handlers.

```jsx
import React, { useState } from 'react';
import { useEventCallback } from '@uiw/react-tabs-draggable';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEventCallback(() => {
    console.log('Clicked! Current count:', count);
    // This callback will always have the latest 'count' value
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={handleClick}>Log Count</button>
    </div>
  );
}

export default MyComponent;
```

--------------------------------

### Tabs with Drop Handling

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/tabs.md

Illustrates how to enable drag-and-drop reordering of tabs. Implements the onTabDrop callback to update the tab order and manages the active tab.

```jsx
import React, { useState } from 'react';
import Tabs, { Tab } from '@uiw/react-tabs-draggable';

function App() {
  const [tabs, setTabs] = useState([
    { id: 'tab-1', label: 'Home' },
    { id: 'tab-2', label: 'Settings' },
  ]);
  const [activeKey, setActiveKey] = useState('tab-1');

  const handleTabDrop = (draggedId, newIndex) => {
    const oldIndex = tabs.findIndex((t) => t.id === draggedId);
    const newTabs = [...tabs];
    const [removed] = newTabs.splice(oldIndex, 1);
    newTabs.splice(newIndex, 0, removed);
    setTabs(newTabs);
  };

  return (
    <Tabs 
      activeKey={activeKey}
      onTabClick={(id) => setActiveKey(id)}
      onTabDrop={handleTabDrop}
    >
      {tabs.map((tab) => (
        <Tab key={tab.id} id={tab.id}>
          {tab.label}
        </Tab>
      ))}
    </Tabs>
  );
}
```

--------------------------------

### Tabs with Drop Handler

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/entry-point.md

Illustrates how to enable tab reordering via drag-and-drop using the onTabDrop prop. The handler updates the state to reflect the new tab order.

```jsx
import React, { useState } from 'react';
import Tabs, { Tab } from '@uiw/react-tabs-draggable';

function App() {
  const [tabs, setTabs] = useState([
    { id: 'tab-1', label: 'Home' },
    { id: 'tab-2', label: 'Settings' },
  ]);

  const handleTabDrop = (draggedId, newIndex) => {
    const newTabs = [...tabs];
    const oldIndex = newTabs.findIndex((t) => t.id === draggedId);
    const [tab] = newTabs.splice(oldIndex, 1);
    newTabs.splice(newIndex, 0, tab);
    setTabs(newTabs);
  };

  return (
    <Tabs onTabDrop={handleTabDrop}>
      {tabs.map((tab) => (
        <Tab key={tab.id} id={tab.id}>
          {tab.label}
        </Tab>
      ))}
    </Tabs>
  );
}
```

--------------------------------

### Import All At Once

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/API_SURFACE.md

Imports all available components and utilities from the '@uiw/react-tabs-draggable' package in a single statement.

```typescript
import Tabs, { 
  Tab, 
  useDataContext, 
  useEventCallback,
  TabsProps,
  TabProps,
  ItemTypes,
} from '@uiw/react-tabs-draggable';
```

--------------------------------

### React Tabs Draggable Architecture

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/INDEX.md

Illustrates the entry point and component hierarchy for the Tabs component, including DndProvider, Provider, and individual Tab components.

```plaintext
Entry Point (Tabs)
  ├─ DndProvider (react-dnd context)
  ├─ Provider (state context)
  └─ Tabs Container
       ├─ Tab 1 (with drag/drop)
       ├─ Tab 2 (with drag/drop)
       └─ ...

```

--------------------------------

### Drag and Drop Internals - useDrop Configuration

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/MANIFEST.txt

Shows the configuration for the `useDrop` hook, which is part of the drag-and-drop mechanism. It defines what can be dropped and how the drop target reacts.

```javascript
import { useDrop } from 'react-dnd';

const [{ isOver }, drop] = useDrop({
  accept: 'TAB',
  collect: (monitor) => ({
    isOver: monitor.isOver(),
  }),
  hover: (item, monitor) => {
    // Logic for handling hover events during drag
  },
  drop: (item, monitor) => {
    // Logic for handling drop events
    return undefined;
  },
});

// Attach the drop ref to a DOM element
```

--------------------------------

### Import Tabs Component

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/entry-point.md

Import the Tabs component from the main entry point or the specific ESM path.

```typescript
import Tabs from '@uiw/react-tabs-draggable';
// Equivalent to:
import Tabs from '@uiw/react-tabs-draggable/esm/index.js';
```

--------------------------------

### Connect Drag Source and Drop Target

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/drag-drop-internals.md

Connects the ref to drag source and drop target hooks if the tab is draggable. The order of `drag` and `drop` calls is important.

```typescript
if (props.draggable !== false) {
  drag(drop(ref));
}
```

--------------------------------

### Import Default Tabs Component

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/overview.md

Import the default Tabs component from the library. This component is a wrapper that includes DndProvider and state management Provider.

```typescript
import Tabs from '@uiw/react-tabs-draggable';
```

--------------------------------

### Default Initial State

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/store-context.md

Defines the default initial state for the store context. It includes an empty active key and an empty array for tab data.

```typescript
export const initialState: InitialState = {
  activeKey: '',
  data: [],
};
```

--------------------------------

### Provider Component

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/store-context.md

The Provider component wraps the application tree and manages the global state for all Tab components. It requires an initial state object and children components.

```APIDOC
## Provider Component

### Description
The `Provider` component wraps the application tree and manages the global state for all Tab components.

### Import
```typescript
import { Provider } from '@uiw/react-tabs-draggable';
```

### Component Signature
```typescript
const Provider: FC<PropsWithChildren<{ init: InitialState }>>
```

### Props
#### Request Body
- **init** (`InitialState`) - Required - Initial state object containing `activeKey`, `data`, `onTabClick`, and `onTabDrop`
- **children** (`ReactNode`) - Required - React components that will have access to the context

### State Interface: InitialState
```typescript
interface InitialState extends Pick<TabsProps, 'onTabClick' | 'onTabDrop'> {
  activeKey?: string;
  data?: Array<{ 
    id: string;
    children: React.ReactElement;
    element: HTMLElement;
  }>;
}
```

### Behavior
- Uses React's `useReducer` hook with a simple reducer that spreads incoming actions into the state
- Creates a context with the state and dispatch function
- Passes both state and dispatch to child components via `useDataContext` hook

### Code Example: Basic Usage
```jsx
import { Provider, useDataContext } from '@uiw/react-tabs-draggable';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

function CustomApp() {
  const [activeKey, setActiveKey] = useState('tab-1');

  const handleTabClick = (id) => setActiveKey(id);
  const handleTabDrop = (id, newIndex) => {
    console.log(`Tab ${id} moved to index ${newIndex}`);
  };

  return (
    <DndProvider backend={HTML5Backend} context={window}>
      <Provider 
        init={{
          activeKey,
          data: [],
          onTabClick: handleTabClick,
          onTabDrop: handleTabDrop,
        }}
      >
        {/* Tab components go here */}
      </Provider>
    </DndProvider>
  );
}
```

### Code Example: With useDataContext
```jsx
import { Provider, useDataContext } from '@uiw/react-tabs-draggable';

function DisplayTabInfo() {
  const { activeKey, data, dispatch } = useDataContext();

  return (
    <div>
      <p>Active Tab: {activeKey}</p>
      <p>Total Tabs: {data?.length ?? 0}</p>
      <button onClick={() => dispatch?.({ activeKey: 'tab-2' })}>
        Switch to Tab 2
      </button>
    </div>
  );
}

function App() {
  return (
    <Provider init={{ activeKey: 'tab-1', data: [] }}>
      <DisplayTabInfo />
    </Provider>
  );
}
```
```

--------------------------------

### React Tabs Draggable Dependency Tree

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/INDEX.md

Lists the direct and peer dependencies of the react-tabs-draggable library, including react-dnd, immutability-helper, and React itself.

```plaintext
@uiw/react-tabs-draggable
├── react-dnd ^16.0.1
│   └── dnd-core
├── react-dnd-html5-backend ^16.0.1
│   └── dnd-core
├── immutability-helper ^3.1.1
└── @babel/runtime ^7.11.0

Peer Dependencies:
├── react >=16.8.0
└── react-dom >=16.8.0

```

--------------------------------

### InitialState Interface

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/store-context.md

Defines the structure of the initial state object required by the Provider component.

```typescript
interface InitialState extends Pick<TabsProps, 'onTabClick' | 'onTabDrop'> {
  activeKey?: string;
  data?: Array<{ 
    id: string;
    children: React.ReactElement;
    element: HTMLElement;
  }>;
}
```

--------------------------------

### Create Context Object

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/store-context.md

Defines the context object using React's createContext. It includes the initial state and a dispatch function.

```typescript
const Context = createContext<CreateContext>({
  state: initialState,
  dispatch: () => null,
});
```

--------------------------------

### Context Object: Context

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/store-context.md

The context object created by createContext, holding the state and dispatch function for managing tab state.

```APIDOC
## Context Object: Context

The context created by `createContext<CreateContext>(...)`.

### Definition

```typescript
const Context = createContext<CreateContext>({
  state: initialState,
  dispatch: () => null,
});
```

### Type: CreateContext

```typescript
interface CreateContext {
  state: Partial<InitialState>;
  dispatch?: React.Dispatch<InitialState>;
}
```

### Properties

| Property | Type | Description |
|----------|------|-------------|
| `state` | `Partial<InitialState>` | The current state object containing `activeKey`, `data`, callbacks |
| `dispatch` | `React.Dispatch<InitialState>` | Function to trigger state updates |

### Default Value

The context is initialized with:
```typescript
{
  state: {
    activeKey: '',
    data: [],
  },
  dispatch: () => null,
}
```

### Usage

Accessed via the `useDataContext` hook (see hooks documentation).
```

--------------------------------

### Custom Styling and Vertical Dragging

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/tab.md

Demonstrates how to apply custom styles to a tab using styled-components and enable vertical dragging by setting `dragableY` to `true`. The `cursor: move` and `user-select: none` CSS properties enhance the drag experience.

```jsx
import styled from 'styled-components';
import { Tab } from '@uiw/react-tabs-draggable';

const StyledTab = styled(Tab)`
  background-color: #f0f0f0;
  padding: 8px 16px;
  border-radius: 4px 4px 0 0;
  cursor: move;
  user-select: none;

  &.w-active {
    background-color: #0066cc;
    color: white;
  }
`;

function App() {
  return (
    <StyledTab id="tab-1" dragableY={true}>
      Vertically Draggable Tab
    </StyledTab>
  );
}
```

--------------------------------

### Import useEventCallback Hook

Source: https://github.com/uiwjs/react-tabs-draggable/blob/main/_autodocs/api-reference/hooks.md

Import the `useEventCallback` hook from the `@uiw/react-tabs-draggable` package.

```typescript
import { useEventCallback } from '@uiw/react-tabs-draggable';
```