{"id":19906019,"url":"https://github.com/onmotion/react-tabtab-next","last_synced_at":"2025-05-03T01:34:31.853Z","repository":{"id":42064575,"uuid":"473511754","full_name":"onmotion/react-tabtab-next","owner":"onmotion","description":"[TypeScript] A mobile support, draggable, editable and api based Tab for ReactJS","archived":false,"fork":false,"pushed_at":"2022-07-27T11:54:17.000Z","size":6144,"stargazers_count":17,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-09T12:48:03.973Z","etag":null,"topics":["closable","draggable","react","sortable","tabs","tabtab","tabtab-next","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onmotion.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-24T08:09:16.000Z","updated_at":"2024-07-16T11:31:58.000Z","dependencies_parsed_at":"2022-09-05T16:50:30.304Z","dependency_job_id":null,"html_url":"https://github.com/onmotion/react-tabtab-next","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onmotion%2Freact-tabtab-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onmotion%2Freact-tabtab-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onmotion%2Freact-tabtab-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onmotion%2Freact-tabtab-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onmotion","download_url":"https://codeload.github.com/onmotion/react-tabtab-next/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224347475,"owners_count":17296418,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["closable","draggable","react","sortable","tabs","tabtab","tabtab-next","typescript"],"created_at":"2024-11-12T20:35:12.553Z","updated_at":"2024-11-12T20:35:13.918Z","avatar_url":"https://github.com/onmotion.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-tabtab-next\n\n[![license](https://img.shields.io/github/license/onmotion/react-tabtab-next)](https://www.npmjs.com/package/@react-tabtab-next/tabtab)\n[![npm](https://img.shields.io/npm/v/@react-tabtab-next/tabtab.svg)](https://www.npmjs.com/package/@react-tabtab-next/tabtab)\n[![npm](https://img.shields.io/npm/dm/@react-tabtab-next/tabtab.svg?maxAge=43200\u0026downloads)](https://www.npmjs.com/package/@react-tabtab-next/tabtab)\n\n## A mobile support, draggable, editable and api based Tab for ReactJS\n\n**(!) This lib based on [react-tabtab](https://github.com/ctxhou/react-tabtab) but refactored using Typescript and replacing some deprecated libs**\n\u003cimg src=\"./docs/ts.svg\" width=\"20px\" \u003e\n\u003cimg src=\"./docs/js.svg\" width=\"20px\" \u003e\n\n### [Demo Page](https://onmotion.github.io/react-tabtab-next/)\n\n### [Demo Playground](https://codesandbox.io/s/react-tabtab-next-yk4moo)\n\n\u003cp style=\"text-align: center;\" align=\"center\"\u003e\n    \u003cimg src=\"./docs/demo.gif\" width=\"100%\" \u003e\n\u003c/p\u003e\n\nfor build a local playground run\n\n```bash\nnpm run demo\n```\n\nalso here Codesandbox [playground](https://codesandbox.io/s/react-tabtab-next-yk4moo)\n\n## Features\n\n-   **Mobile supported** — Touch support. Easy to use on mobile device\n-   **Draggable tab** — Support drag and drop tab\n-   **Add \u0026 Delete** — Tab can be added and deleted\n-   **Async content** — Lazy load panel content\n-   **Customizable style** — Based on `styled-components`, super easy to customize tab style\n-   **API based** — All actions are controllable\n-   **ARIA accessible**\n\n## Table of Contents\n\n-   [Installation](#installation)\n-   [Usage](#usage)\n    -   [Minimal setup](#minimal-setup)\n    -   [Draggable tab](#draggable-tab)\n    -   [Async Panel](#async-panel)\n    -   [Another Examples](#another-examples)\n-   [Components / Api](#components--api)\n-   [Customize style](#customize-style)\n-   [Development](#development)\n-   [License](#license)\n\n\u003c!-- tocstop --\u003e\n\n## Installation\n\nInstall it with npm or yarn\n\n```sh\nnpm install @react-tabtab-next/tabtab --save\n```\n\nThen, import the module by module bundler like `webpack`, `browserify`\n\n```js\n// es6\nimport { Tabs, DragTabList, PanelList, Panel, ExtraButton } from '@react-tabtab-next/tabtab';\n\n// not using es6\nvar Tabtab = require('react-tabtab');\nvar Tabs = Tabtab.Tabs;\n```\n\n## Usage\n\nReact-tabtab is a tab component with highly customization. You can create a tab in simply setting. You also can create a tab system full with `draggable`, `async loading`, `close and create button`.\nAll the actions are api based. It means there is `no state` in the component. Developers have full control.\n\n### Minimal setup\n\n```js\nimport React from 'react';\nimport { Tabs, Panel, Tab, TabList, PanelList } from '@react-tabtab-next/tabtab';\n\nexport const Example = () =\u003e {\n    return (\n        \u003cTabs\u003e\n            \u003cTabList\u003e\n                \u003cTab\u003eTab1\u003c/Tab\u003e\n                \u003cTab\u003eTab2\u003c/Tab\u003e\n            \u003c/TabList\u003e\n            \u003cPanelList\u003e\n                \u003cPanel\u003eContent1\u003c/Panel\u003e\n                \u003cPanel\u003eContent2\u003c/Panel\u003e\n            \u003c/PanelList\u003e\n        \u003c/Tabs\u003e\n    );\n};\n```\n\nIt's simple to use. Zero configuration!\n\n### Draggable tab\n\n```js\nimport React, { Component } from 'react';\nimport { Tabs, DragTabList, PanelList, Panel, Tab, helpers } from '@react-tabtab-next/tabtab';\n\nconst makeData = (number, titlePrefix = 'Tab') =\u003e {\n    const data = [];\n    for (let i = 0; i \u003c number; i++) {\n        data.push({\n            title: `${titlePrefix} ${i}`,\n            content: \u003cdiv\u003eContent {i}\u003c/div\u003e,\n        });\n    }\n    return data;\n};\n\nexport default class Drag extends Component {\n    constructor(props) {\n        super(props);\n        this.handleTabChange = this.handleTabChange.bind(this);\n        this.handleTabSequenceChange = this.handleTabSequenceChange.bind(this);\n        const tabs = makeData(10, 'Some Tab');\n        this.state = {\n            activeIndex: 0,\n            tabs,\n        };\n    }\n\n    handleTabChange(index) {\n        this.setState({ activeIndex: index });\n    }\n\n    handleTabSequenceChange({ oldIndex, newIndex }) {\n        const { tabs } = this.state;\n        const updateTabs = helpers.simpleSwitch(tabs, oldIndex, newIndex);\n        this.setState({ tabs: updateTabs, activeIndex: newIndex });\n    }\n\n    render() {\n        const { tabs, activeIndex } = this.state;\n        const tabsTemplate = [];\n        const panelTemplate = [];\n        tabs.forEach((tab, index) =\u003e {\n            tabsTemplate.push(\u003cTab key={index}\u003e{tab.title}\u003c/Tab\u003e);\n            panelTemplate.push(\u003cPanel key={index}\u003e{tab.content}\u003c/Panel\u003e);\n        });\n        return (\n            \u003cTabs\n                activeIndex={activeIndex}\n                onTabChange={this.handleTabChange}\n                onTabSequenceChange={this.handleTabSequenceChange}\n                customStyle={this.props.customStyle}\n            \u003e\n                \u003cDragTabList\u003e{tabsTemplate}\u003c/DragTabList\u003e\n                \u003cPanelList\u003e{panelTemplate}\u003c/PanelList\u003e\n            \u003c/Tabs\u003e\n        );\n    }\n}\n\nReactDOM.render(\u003cDrag /\u003e, document.getElementById('root'));\n```\n\nBased on above example, the different to implement `normal tab` or `drag tab` is using different wrapper and child.\n\nAnd all the actions are controllable. You can customize your switch action. But if you don't want to write customized switch logic, you can directly use `import {simpleSwitch} from 'react-tabtab/lib/helpers/move'` this built-in function.\n\n### normal tab\n\n```js\n\u003cTabs\u003e\n    \u003cTabList\u003e\n        \u003cTab\u003eTab1\u003c/Tab\u003e\n        \u003cTab\u003eTab2\u003c/Tab\u003e\n    \u003c/TabList\u003e\n    \u003cPanelList\u003e\n        \u003cPanel\u003eContent1\u003c/Panel\u003e\n        \u003cPanel\u003eContent2\u003c/Panel\u003e\n    \u003c/PanelList\u003e\n\u003c/Tabs\u003e\n```\n\n### Sortable tabs (+ ExtraButton)\n\n```js\n\u003cTabs\n    // customStyle={md}\n    // activeIndex={activeTab}\n    // onTabChange={handleOnTabChange}\n    // onTabSequenceChange={handleOnTabSequenceChange}\n    ExtraButton={\n        \u003cExtraButton\n            onClick={(e) =\u003e {\n                console.log(e);\n            }}\n        \u003e\n            +\n        \u003c/ExtraButton\u003e\n    }\n\u003e\n    \u003cDragTabList\u003e\n        \u003cTab\u003eTab1\u003c/Tab\u003e\n        \u003cTab\u003eTab2\u003c/Tab\u003e\n    \u003c/DragTabList\u003e\n    \u003cPanelList\u003e\n        \u003cPanel\u003eContent1\u003c/Panel\u003e\n        \u003cPanel\u003eContent2\u003c/Panel\u003e\n    \u003c/PanelList\u003e\n\u003c/Tabs\u003e\n```\n\n### Async Panel\n\nIn some case, if the data is large or we want to save the bandwidth, lazy loading the content is possible solution. You can use `AsyncPanel` to laze load panel content.\nMoreover, you can mix lazy load panel with normal panel!\n\n```js\nimport React from 'react';\nimport { Tabs, Panel, Tab, TabList, PanelList, AsyncPanel } from '@react-tabtab-next/tabtab';\n\nconst AsyncTabsExmple = () =\u003e {\n    const loadContentFunc = (callback) =\u003e {\n        setTimeout(() =\u003e {\n            callback(null, 'some content');\n        }, 1000);\n    };\n    return (\n        \u003cTabs\u003e\n            \u003cTabList\u003e\n                \u003cTab\u003eTab1\u003c/Tab\u003e\n                \u003cTab\u003eTab2\u003c/Tab\u003e\n            \u003c/TabList\u003e\n            \u003cPanelList\u003e\n                \u003cPanel\u003eContent1\u003c/Panel\u003e\n                \u003cAsyncPanel\n                    loadContent={loadContentFunc}\n                    render={(data) =\u003e \u003cdiv\u003e{JSON.stringify(data)}\u003c/div\u003e}\n                    renderLoading={() =\u003e \u003cdiv\u003eLoading...\u003c/div\u003e}\n                    cache={true}\n                /\u003e\n            \u003c/PanelList\u003e\n        \u003c/Tabs\u003e\n    );\n};\n\nexport default AsyncTabsExmple;\n```\n\nTo implement lazy loading, use `AsyncPanel` to wrap your panel content. Remember to provide `loadContent`, `render`, `renderLoading` these 3 props.\n\nIn `loadContent` props, both `callback` and `promise` type are supported.\n\nIf you use `callback`, remember to call `callback` when finish async loading.\n\nIf you use `promise`, need to return promise action.\n\nWhen data is loading, the panel content will show `renderLoading` component.\n\nAfter finishing loading data, the panel content will show `render` component and react-tabtab will pass the `loadContent` result as first parameter. So you can customize the component of panel content.\n\n### Another Examples\n\nMore code examples are avalable [here](https://github.com/onmotion/react-tabtab-next/blob/master/demo/src/App.tsx).\n\n## Components / Api\n\n### \u0026lt;Tabs /\u0026gt;\n\n`\u003cTabs/\u003e` is the main component of `react-tabtab`. Most of the api is passed from it.\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth\u003eprops\u003c/th\u003e\n      \u003cth\u003etype\u003c/th\u003e\n      \u003cth\u003edefault\u003c/th\u003e\n      \u003cth\u003e\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eactiveIndex\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003econtrol current activeIndex.\u003cbr/\u003eYou need to pass new activeIndex value if you want to show different tab.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edefaultIndex\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e0\u003c/td\u003e\n      \u003ctd\u003edefault selected index if active index is not provided\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eshowModalButton\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003cbr/\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e4\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003cb\u003etrue\u003c/b\u003e: always show button\u003c/li\u003e\n          \u003cli\u003e\u003cb\u003efalse\u003c/b\u003e: always hide button\u003c/li\u003e\n          \u003cli\u003e\u003cb\u003e[number]\u003c/b\u003e: when \u003ccode\u003enumber of tab \u003e= [number]\u003c/code\u003e, show button\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eshowArrowButton\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eauto\u003c/code\u003e\u003cbr/\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eauto\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cli\u003e\u003cb\u003eauto\u003c/b\u003e: detect tab width, if they exceed container, show button\u003c/li\u003e\n        \u003cli\u003e\u003cb\u003etrue\u003c/b\u003e: always show button\u003c/li\u003e\n        \u003cli\u003e\u003cb\u003efalse\u003c/b\u003e: always hide button\u003c/li\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eExtraButton\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eReact Node\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e\n        customize extra button content, example: `+` button\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonTabChange\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e(tabIndex) =\u003e {}\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e\n        return tabIndex is clicked\u003cbr/\u003e\n        You can use this api with \u003ccode\u003eactiveIndex\u003c/code\u003e. When user click tab, update \u003ccode\u003eactiveIndex\u003c/code\u003e.\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonTabSequenceChange\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e(oldIndex, newIndex) =\u003e {}\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e\n        return changed oldIndex and newIndex value\u003cbr/\u003e\n        With this api, you can do switch tab very easily.\n        \u003cb\u003eNote:\u003cb/\u003eThis api is only called by \u003ccode\u003e\u0026lt;DragTabList/\u0026gt;\u003c/code\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonTabClose\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e(index) =\u003e {}\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003e\n        When user click \u003cb\u003eclose button\u003c/b\u003e , this api will return the clicked close button index.\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecustomStyle\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cpre\u003e\n\u003ccode\u003e{\n  TabList: React.Element,\n  Tab: React.Element,\n  Panel: React.Element,\n  ActionButton: React.Element\n}\u003c/code\u003e\u003c/pre\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e theme\u003c/td\u003e\n      \u003ctd\u003e\n        customized tab style component\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### \u0026lt;TabList /\u0026gt;\n\nUse to wrap `\u003cTab/\u003e`.\n\n### \u0026lt;DragTabList /\u0026gt;\n\nUse to wrap `\u003cTab/\u003e`.\n\n### \u0026lt;Tab /\u0026gt;\n\nNormal Tab. Show the children component on tab.\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth\u003eprops\u003c/th\u003e\n      \u003cth\u003etype\u003c/th\u003e\n      \u003cth\u003edefault\u003c/th\u003e\n      \u003cth\u003e\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eclosable\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003ewhether to show close button\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n**Example**\n\n```js\n\u003cTab\u003e\n    \u003ci className=\"fa fa-map-pin\"\u003e\u003c/i\u003e\n    map tab\n\u003c/Tab\u003e\n```\n\n### \u0026lt;PanelList/ \u0026gt;\n\nUse to wrap `\u003cPanel/\u003e`\n\n### \u0026lt;Panel /\u0026gt;\n\nTab content.\n\n### \u0026lt;AsyncPanel /\u0026gt;\n\nLazy loading panel content.\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth\u003eprops\u003c/th\u003e\n      \u003cth\u003etype\u003c/th\u003e\n      \u003cth\u003edefault\u003c/th\u003e\n      \u003cth\u003e\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eloadContent \u003cb\u003e*\u003c/b\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        \u003ccode\u003e(cb) =\u003e cb(error, data)\u003c/code\u003e or \u003cbr/\u003e\n        \u003ccode\u003e(cb) =\u003e Promise\n      \u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003ewhen loadContent finish, call the callback or you can return promise\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003erender \u003cb\u003e*\u003c/b\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        \u003ccode\u003e(data) =\u003e Component\u003c/code\u003e\n      \u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003ewhen finish loading data, render this component\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003erenderLoading \u003cb\u003e*\u003c/b\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        \u003ccode\u003e() =\u003e Component\u003c/code\u003e\n      \u003c/td\u003e\n      \u003ctd\u003enull\u003c/td\u003e\n      \u003ctd\u003ewhen it is loading data, render this component\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecache\u003c/td\u003e\n      \u003ctd\u003e\n        \u003ccode\u003eboolean\u003c/code\u003e\n      \u003c/td\u003e\n      \u003ctd\u003etrue\u003c/td\u003e\n      \u003ctd\u003eshould cache the data\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Customize style\n\n`react-tabtab-next` is based on `styled-components`. Therefore, it's super easy to customize the tab style.\n\nJust extend the default component style and pass it to `customStyle` props.\n\n### Use current style\n\nInstall tabtab themes\n\n```sh\nnpm install @react-tabtab-next/themes --save\n```\n\nAvailable themes: `md`, `bootstrap`, `bulma`\n\nFor example, if you want to use `material-design`, import the style and pass to `customStyle` props.\n\n**Example:**\n\n```js\nimport React, { Component } from 'react';\nimport { Tabs, TabList, Tab, PanelList, Panel } from '@react-tabtab-next/tabtab';\nimport { md } from '@react-tabtab-next/themes';\n\nexport default class Customized extends Component {\n    render() {\n        return (\n            \u003cTabs customStyle={md}\u003e\n                \u003cTabList\u003e\n                    \u003cTab\u003eTab1\u003c/Tab\u003e\n                    \u003cTab\u003eTab2\u003c/Tab\u003e\n                \u003c/TabList\u003e\n                \u003cPanelList\u003e\n                    \u003cPanel\u003eContent1\u003c/Panel\u003e\n                    \u003cPanel\u003eContent2\u003c/Panel\u003e\n                \u003c/PanelList\u003e\n            \u003c/Tabs\u003e\n        );\n    }\n}\n```\n\nAnd now your tab is material design style!\n\n### Make your own style\n\nIf current theme doesn't meet your demand, follow this three steps and create a new one.\n\n-   First step: import current style\n\n```js\nimport styled from 'styled-components';\nimport { styled as styledTabTab } from '@react-tabtab-next/tabtab';\n\nlet { TabListStyle, ActionButtonStyle, TabStyle, PanelStyle } = styledTabTab;\n```\n\n-   Second: extend style and export it\n\n```js\nimport styled from 'styled-components';\nimport { styled as themeStyled } from '@react-tabtab-next/tabtab';\n\nlet { TabList, ActionButton, Tab, Panel } = themeStyled;\n\nTabList = styled(TabList)`\n    background-color: transparent;\n    line-height: 1.2;\n    border: 0;\n`;\n\nTab = styled(Tab)`\n    padding: 1px 10px;\n    position: relative;\n    font-size: 12px;\n    text-transform: uppercase;\n    border: 0;\n    background: transparent;\n    ${(props) =\u003e {\n        return props.active \u0026\u0026 !props.vertical\n            ? `\n      border-bottom: 2px solid #ce93d8;\n    `\n            : null;\n    }}\n    \u0026:hover .tab-label_close-button {\n        opacity: 1;\n    }\n    \u0026:hover {\n        color: unset;\n        background: #89898920;\n    }\n`;\n\nActionButton = styled(ActionButton)`\n    background-color: transparent;\n    border-radius: 0;\n    border: none;\n    opacity: 0.3;\n    transition: opacity 0.2s;\n    \u0026 svg {\n        font-size: 21px;\n        padding: 0;\n    }\n    \u0026:hover {\n        opacity: 1;\n    }\n`;\n\nPanel = styled(Panel)``;\n\nexport { TabList, ActionButton, Tab, Panel };\n```\n\n-   Last: import your style and use it!\n\nWhen you finish the new `@react-tabtab-next/theme` style, feel free to add it to `theme/` folder and send PR!\n\n## Development\n\n```bash\nnpm i\nnpm run demo\n```\n\nor\n\n```bash\nyarn install\nyarn demo\n```\n\nBuild the bundle\n\n```bash\nnpm i\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonmotion%2Freact-tabtab-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonmotion%2Freact-tabtab-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonmotion%2Freact-tabtab-next/lists"}