Nitrogenous Polymorphic Molecule

    react-draggable-tabs

    1.0.8 • Public • Published

    React draggable tabs npm version

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

    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>

    Example

    Checkout the live example here
    Edit n0952xxo6p

    Keywords

    none

    Install

    npm i react-draggable-tabs

    DownloadsWeekly Downloads

    160

    Version

    1.0.8

    License

    none

    Unpacked Size

    6.57 MB

    Total Files

    26

    Last publish

    Collaborators

    • andreazanin