Package Exports

@uiw/react-tabs-draggable
@uiw/react-tabs-draggable/cjs/index.js
@uiw/react-tabs-draggable/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-tabs-draggable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-tabs-draggable

Draggable tabs for React. Demo Preview: @uiwjs.github.io/react-tabs-draggable

Install

Not dependent on uiw.

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

Base Usage

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

function App() {
  const [activeKey, setActiveKey] = useState('tab-1');
  return (
    <div>
      <Tabs activeKey={activeKey} style={{ gap: 12 }} onTabClick={(id) => setActiveKey(id)}>
        <Tab id="tab-1">{activeKey === 'tab-1' && '▶'}Google</Tab>
        <Tab id="tab-2">{activeKey === 'tab-2' && '▶'}MicroSoft</Tab>
        <Tab id="tab-3">{activeKey === 'tab-3' && '▶'}Baidu</Tab>
        <Tab id="tab-4">{activeKey === 'tab-4' && '▶'}Taobao</Tab>
        <Tab id="tab-5">{activeKey === 'tab-5' && '▶'}JD</Tab>
      </Tabs>
      <div style={{ background: '#fff', padding: 12 }}>{activeKey}</div>
    </div>
  );
}
export default App;

Disable Draggable

The first tab is disabled.

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

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

const Content = styled.div`
  border-top: 1px solid #333;
`;

function App() {
  const [activeKey, setActiveKey] = useState('tab-0-1');
  return (
    <div>
      <Tabs activeKey={activeKey} style={{ gap: 6 }} onTabClick={(id) => setActiveKey(id)}>
        <TabItem id="tab-0-1">Google</TabItem>
        <TabItem id="tab-0-2">MicroSoft</TabItem>
        <TabItem id="tab-0-3">Baidu</TabItem>
        <TabItem id="tab-0-4">Taobao</TabItem>
        <TabItem id="tab-0-5">JD</TabItem>
      </Tabs>
      <Content>{activeKey}</Content>
    </div>
  );
}
export default App;

Add & Close tab

The first tab is disabled.

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;

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;

Props

export interface TabsProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
  activeKey?: string;
  onTabClick?: (id: string, evn: React.MouseEvent<HTMLDivElement>) => void;
  /**
   * Optional. Called when a compatible item is dropped on the target.
   */
  onTabDrop?: (id: string, index?: number, offset?: XYCoord | null) => void;
}
export interface TabProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
  id: string;
  index?: number;
  /** Whether the Y axis can be dragged */
  dragableY?: boolean;
}
export declare const Tab: FC<PropsWithChildren<TabProps>>;

Development

npm run watch     # Listen create type and .tsx files.
npm run start     # Preview code example.

Contributors

As always, thanks to our amazing contributors!

Made with action-contributors.

License

Licensed under the MIT License.