Draggable atom-like tabs for React

by React

react-draggable-tabs

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

View demo Download Source

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