Draggable atom-like tabs for React

react-draggable-tabs

The plugin is inspired by Atom and allows you to use these beautiful tabs in your React App

Install

just download the repo from npm

npm install react-draggable-tabs --save

Usage

You can import the Tabs component

import Tabs from "react-draggable-tabs"

...

<Tabs />

The Tabs component requires 4 props:

  • tabs: an array of tabs, ever tab is an object and has to contain an id and a content (string or React element), e.g. tabs = [{id:1, content: "Tab 1"}, {id:2, content: "Tab 2"}]
  • moveTab(dragIndex, hoverIndex): a function handling the drag action, it receives the index in the array of the dragged item and of the landing place
  • selectTab(selectedIndex): handles the click event, it receives the index of the clicked tab
  • closeTab(selectedIndex): handles the remove event, it receives the index of the closed tab

You can also add children to the Tabs and they will be placed in the right-most position, it's useful if you want to add control buttons, for example to open a new tab.

<Tabs {/* ...*/}>
<button>+</button>
</Tabs>

GitHub