💃 Make your react tab dance🕺

Last update: Jul 18, 2022



version travis appveyor david codecov download gzip size

A mobile support, draggable, editable and api based Tab for ReactJS.
Support react >= v16.3

Note: Since v2, we don't support v15 and old styled-components version (<4.0.0) v15 document

Demo

demo gif

Features

  • Mobile supported — Touch support. Easy to use on mobile device
  • Draggable tab — Support drag and drop tab
  • Add & Delete — Tab can be added and deleted
  • Async content — Lazy load panel content
  • Customizable style — Based on styled-components, super easy to customize tab style
  • API based — All actions are controllable
  • ARIA accessible

Table of Contents

Installation

Install it with npm or yarn

Install styled-components. Because we put the styled-components to the peerDependencies, it suggests by styled-components official blog

$ npm install react-tabtab --save
$ npm install styled-components@^4.0.0 --save

Then, import the module by module bundler like webpack, browserify

// es6
import {Tabs, DragTabList, DragTab, PanelList, Panel, ExtraButton} from 'react-tabtab';

// not using es6
var Tabtab = require('react-tabtab');
var Tabs = Tabtab.Tabs;
var DragTabList = Tabtab.DragTabList;
var DragTab = Tabtab.DragTab;
var PanelList = Tabtab.PanelList;
var Panel = Tabtab.Panel;
var ExtraButton = Tabtab.ExtraButton;

UMD build is also available. If you do this, you'll need to include the dependencies:

For example:

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/react-sortable-hoc/dist/umd/react-sortable-hoc.js"></script>
<script src="https://unpkg.com/react-poppop/dist/react-poppop.min.js"></script>
<script src="https://unpkg.com/react-tabtab/dist/react-tabtab.min.js"></script>

You can reference standalone.html example.

Usage

React-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. All the actions are api based. It means there is no state in the component. Developers have full control.

Minimal setup

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Tabs, TabList, Tab, PanelList, Panel} from 'react-tabtab';

class Basic extends Component {
  render() {
    return (
      <Tabs>
        <TabList>
          <Tab>Tab1</Tab>
          <Tab>Tab2</Tab>
        </TabList>
        <PanelList>
          <Panel>Content1</Panel>
          <Panel>Content2</Panel>
        </PanelList>
      </Tabs>
    )
  }
}

ReactDOM.render(<Basic/>, document.getElementById('root'));

It's simple to use. Zero configuration!

Draggable tab

import React, {Component} from 'react';
import {Tabs, DragTabList, DragTab, PanelList, Panel} from 'react-tabtab';
import {simpleSwitch} from 'react-tabtab/lib/helpers/move';

export default class Drag extends Component {
  constructor(props) {
    super(props);
    this.handleTabChange = this.handleTabChange.bind(this);
    this.handleTabSequenceChange = this.handleTabSequenceChange.bind(this);
    this.state = {
      activeIndex: 0,
    }
  }

  handleTabChange(index) {
    this.setState({activeIndex: index});
  }

  handleTabSequenceChange({oldIndex, newIndex}) {
    const {tabs} = this.state;
    const updateTabs = simpleSwitch(tabs, oldIndex, newIndex);
    this.setState({tabs: updateTabs, activeIndex: newIndex});
  }

  render() {
    const {activeIndex} = this.state;
    return (
      <Tabs activeIndex={activeIndex}
            onTabChange={this.handleTabChange}
            onTabSequenceChange={this.handleTabSequenceChange}>
        <DragTabList>
          <DragTab>DragTab1</DragTab>
          <DragTab>DragTab2</DragTab>
        </DragTabList>
        <PanelList>
          <Panel>Content1</Panel>
          <Panel>Content2</Panel>
        </PanelList>
      </Tabs>
    )
  }
}
ReactDOM.render(<Basic/>, document.getElementById('root'));

Based on above example, the different to implement normal tab or drag tab is using different wrapper and child.

And 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.

normal tab

<Tabs>
  <TabList>
    <Tab>Tab1</Tab>
  </TabList>
  <PanelList>
    <Panel>Content1</Panel>
  </PanelList>
</Tabs>

drag tab

<Tabs>
  <DragTabList>
    <DragTab>DragTab1</DragTab>
  </DragTabList>
  <PanelList>
    <Panel>Content1</Panel>
  </PanelList>
</Tabs>

Async Panel

In 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. Moreover, you can mix lazy load panel with normal panel!

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Tabs, TabList, Tab, PanelList, AsyncPanel, Panel} from 'react-tabtab';

function loadContentFunc(callback) {
  setTimeout(() => {
    callback(null, [
      {product: 'json'},
      {product: 'joseph'}
    ]);
  }, 100);
}

// You also can provide promise as return function:
// function loadContentFunc() {
//   return fetch('/products')
//     .then(resp => resp.json())
//     .then(data => data);
// }

class AsyncTab extends Component {
  render() {
    return (
      <Tabs>
        <TabList>
          <Tab>Tab1</Tab>
          <Tab>Tab2</Tab>
        </TabList>
        <PanelList>
          <Panel>Content1</Panel>
          <AsyncPanel loadContent={loadContentFunc}
                      render={data => (<div>{JSON.stringify(data)}</div>)}
                      renderLoading={() => (<div>Loading...</div>)}
                      cache={true}
          />
        </PanelList>
      </Tabs>
    )
  }
}

ReactDOM.render(<AsyncTab/>, document.getElementById('root'));

To implement lazy loading, use AsyncPanel to wrap your panel content. Remember to provide loadContent, render, renderLoading these 3 props.

In loadContent props, both callback and promise type are supported.

If you use callback, remember to call callback when finish async loading.

If you use promise, need to return promise action.

When data is loading, the panel content will show renderLoading component.

After 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.

Live example: Link

Another Example

Except drag and drop tab, react-tabtab also support other usable application, like:

  • Add and close button: Example
  • Modal view at mobile support: Example
  • Auto detect number of tab and make it scrollable
  • All the action is controllable:Example

All of these features are api based, so you can customize each action on demand.

More code examples are avalable here.

Components / Api

<Tabs />

<Tabs/> is the main component of react-tabtab. Most of the api is passed from it.

props type default
defaultIndex int null set the initial active key
activeIndex int null control current activeIndex.
You need to pass new activeIndex value if you want to show different tab.
defaultIndex int null set the initial active key
showModalButton boolean
number
4
  • true: always show button
  • false: always hide button
  • [number]: when number of tab >= [number], show button
showArrowButton auto
boolean
auto
  • auto: detect tab width, if they exceed container, show button
  • true: always show button
  • false: always hide button
  • ExtraButton React Node null customize extra button content, example: `+` button
    onTabChange () => tabIndex null return tabIndex is clicked
    You can use this api with activeIndex. When user click tab, update activeIndex.
    onTabSequenceChange () => {oldIndex, newIndex} null return changed oldIndex and newIndex value
    With this api, you can do switch tab very easily. Note:This api is only called by <DragTab/>
    onTabEdit () => {type: [delete], index} null When user click close button , this api will return the clicked close button index.
    customStyle
    {
      TabList: React.Element,
      Tab: React.Element,
      Panel: React.Element,
      ActionButton: React.Element
    }
    Bootstrap theme customized tab style component

    <TabList />

    Use to wrap <Tab/>.

    <Tab />

    Normal Tab. Show the children component on tab.

    props type default
    closable boolean false whether to show close button

    Example

    <Tab>
      <i className="fa fa-map-pin"></i>
      map tab
    </Tab>

    <DragTabList />

    Use to wrap <DragTab/>.

    <DragTab/ >

    A draggable tab. Api is the same with <Tab/>

    <PanelList/ >

    Use to wrap <Panel/>

    <Panel />

    Tab content.

    <AsyncPanel />

    Lazy loading panel content.

    props type default
    loadContent * (cb) => cb(error, data) or
    (cb) => Promise
    null when loadContent finish, call the callback or you can return promise
    render * (data) => Component null when finish loading data, render this component
    renderLoading * () => Component null when it is loading data, render this component
    cache boolean true should cache the data

    Customize style

    react-tabtab is based on styled-components. Therefore, it's super easy to customize the tab style.

    Just extend the default component style and pass it to customStyle props.

    Use current style

    You can check the current style at src/themes folder.

    For example, if you want to use material-design, import the style and pass to customStyle props.

    Example:

    import {Component} from 'react';
    import {Tabs, TabList, Tab, PanelList, Panel} from 'react-tabtab';
    import * as customStyle from 'react-tabtab/lib/themes/material-design';
    
    class Customized extends Component {
      render() {
        return (
          <Tabs customStyle={customStyle}>
            <TabList>
              <Tab>Tab1</Tab>
              <Tab>Tab2</Tab>
            </TabList>
            <PanelList>
              <Panel>Content1</Panel>
              <Panel>Content2</Panel>
            </PanelList>
          </Tabs>
        )
      }
    }

    And now your tab is material design style!

    Make your own style

    If current theme doesn't meet your demand, follow this three steps and create a new one.

    First step: import current style

    import styled from 'styled-components';
    import { styled as styledTabTab } from 'react-tabtab';
    
    let {TabListStyle, ActionButtonStyle, TabStyle, PanelStyle} = styledTabTab;

    Second: extend style and export it

    import styled from 'styled-components';
    import { styled as styledTabTab } from 'react-tabtab';
    
    let {TabListStyle, ActionButtonStyle, TabStyle, PanelStyle} = styledTabTab;
    
    TabListStyle = styled(TabListStyle)`
      // write css
    `;
    
    TabStyle = styled(TabStyle)`
      // write css
    `;
    
    ActionButtonStyle = styled(ActionButtonStyle)`
      // write css
    `;
    
    PanelStyle = styled(PanelStyle)`
      // write css
    `;
    
    // need to follow this object naming
    module.exports = {
      TabList: TabListStyle,
      ActionButton: ActionButtonStyle,
      Tab: TabStyle,
      Panel: PanelStyle
    }

    Last: import your style and use it!

    When you finish the new react-tabtab style, feel free to add it to theme/ folder and send PR!

    Development

    $ yarn
    $ npm start

    License

    MIT @ctxhou

    GitHub

    https://github.com/ctxhou/react-tabtab
    Comments
    • 1. Sometimes remove(close) button is not working

      Hello,

      I have tested remove(close) buttons on your demo site, https://ctxhou.github.io/react-tabtab/#add-close.

      When I intentionally clicked remove buttons in tabs again and again, sometimes nothing happened.

      That's it. Is there a possibility to fix it ?

      Reviewed by starrybleu at 2018-10-26 09:03
    • 2. Performance issues, with unnecessary updates

      Thank you for this awesome package! It's really great, and works as expected and without any hassle. My only concern is a lot of unnecessary updates, originating from react-tabtab components. I use the why-did-you-update package, to monitor updates that could be avoided, since props and/or state are the same.

      skaermbillede 2017-12-07 kl 13 05 49

      Any ideas on how to avoid this?

      Reviewed by mathiasjakobsen at 2017-12-07 12:07
    • 3. Error in PanelList.render():

      Hi @ctxhou I'm getting an error when I try to put the code from this link https://github.com/ctxhou/react-tabtab/blob/master/docs/components/Basic.js to my project component. I'm currently using "react": "^15.4.0", as per you readme.md your component supports react v15.

      screen shot 2018-03-14 at 8 12 12 pm

      Reviewed by webdevsyd at 2018-03-14 12:15
    • 4. custom style not propagated

      Hello all,

      I've been playing few hours with this library, very easy to instantiate tabs and panels however, I am having an issue with the customStyle that somehow I am not able to define.

      The style has been defined in a separate file called tabConfiguration.js (I copied the css section from the material theme and then tried to change it to see changes on the UI).

      import {styled} from 'react-tabtab';
      let {TabListStyle, ActionButtonStyle, TabStyle, PanelStyle} = styled;
      
      TabListStyle = TabListStyle.extend`
          background-color: #009988;
      `;
      
      TabStyle = TabStyle.extend`
          background-color: #009988;
          transition: color .28s ease;
      ${props => props.active && !props.vertical ?
          ` border-bottom: 2px solid #f6b2b5;` : null}
              &:hover {
                  background-color: transparent;
              }
      `;
      
      ActionButtonStyle = ActionButtonStyle.extend`
          background-color: #009988;
          border-radius: 0;
          &:hover {
              background-color: #eee;
          }
      `;
      
      PanelStyle = PanelStyle.extend`
          background-color: #009988;
          border-left: 1px solid rgba(0,0,0,0.12);
          border-right: 1px solid rgba(0,0,0,0.12);
          border-bottom: 1px solid rgba(0,0,0,0.12);
          padding: 30px 30px;
          transition: box-shadow .25s, -webkit-box-shadow .25s;
          border-radius: 2px;
      `;
      
      // need to follow this object naming
      export default {
          TabList: TabListStyle,
          ActionButton: ActionButtonStyle,
          Tab: TabStyle,
          Panel: PanelStyle
      }
      

      This file is then imported in the main file of my project

      import {Tabs, TabList, Tab, PanelList, Panel} from 'react-tabtab';
      import * as customStyle from './configuration/tabConfiguration';
      

      and this is where I use the react-tabtab component

      <div className="containerForTabs">
                          <Tabs customStyle={customStyle}>
                              <TabList>
                                  <Tab>Adult Brain</Tab>
                                  <Tab>Half Ito</Tab>
                              </TabList>
                              <PanelList>
                                  <Panel>
                                  <FlexLayout.Layout
                                      model={this.state.model}
                                      factory={this.factory.bind(this)}/>
                                  </Panel>
                                  <Panel>
                                      Officiis commodi facilis optio eum aliquam.<br />
                                      Tempore libero sit est architecto voluptate. Harum dolor modi
                                      deleniti animi qui similique facilis. Sit delectus voluptatem
                                      praesentium recusandae neque quo quod.
                                  </Panel>
                              </PanelList>
                          </Tabs>
                      </div>
      

      Thanks in advance for any help.

      Reviewed by ddelpiano at 2018-11-29 14:47
    • 5. New install: ActionButton.extend is not a function.

      Hi there, Into my project I tossed some code just to see it in action which was basically a duplicate of the add and close. Upon running I received the following error.

      85 | var ActionButtonStyle = _styledComponents2.default.div(_templateObject4, buttonWidth);
       86 | 
       87 | var makeScrollButton = function makeScrollButton(ActionButton) {
      > 88 |   return ActionButton.extend(_templateObject5, function (props) {
       89 |     return props.left ? props.showModalButton ? 'left: ' + (buttonWidth + 2) + 'px' : 'left: 0' : 'right: 0';
       90 |   });
       91 | };
      
      

      and

      TabList.js:88 Uncaught TypeError: ActionButton.extend is not a function
          at makeScrollButton (TabList.js:88)
          at TabListComponent.render (TabList.js:353)
          at finishClassComponent (react-dom.development.js:13538)
          at updateClassComponent (react-dom.development.js:13501)
          at beginWork (react-dom.development.js:14090)
          at performUnitOfWork (react-dom.development.js:16416)
          at workLoop (react-dom.development.js:16454)
          at HTMLUnknownElement.callCallback (react-dom.development.js:145) ....
      

      The issue was resolved by reverting back from styled-components 4.0.2 to 3.4.10. Just FYI.

      Reviewed by josefpohl at 2018-10-24 21:58
    • 6. Error when loading themes

      Hi, I'm using react-tabtab with Electron, and when loading themes, webpack reports erros:

      ERROR in ./node_modules/[email protected]@react-tabtab/src/DragTab.js
      Module parse failed: Unexpected token (6:51)
      You may need an appropriate loader to handle this file type.
      | import Tab from './Tab';
      | 
      | const DragTabElement = SortableElement(({children, ...props}) => {
      |   return (
      |     <Tab index={props.tabIndex} {...props}>
       @ ./node_modules/[email protected]@react-tabtab/src/index.js 6:0-32
       @ ./node_modules/[email protected]@react-tabtab/src/themes/material-design/index.js
       @ ./app/pages/tabs/containers/themes.js
       @ ./app/pages/tabs/containers/index.js
       @ ./app/pages/tabs/index.js
       @ ./app/routes.js
       @ ./app/pages/root/containers/index.js
       @ ./app/index.js
       @ multi (webpack)-dev-server/client?http://localhost:1212 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:1212/ webpack/hot/only-dev-server ./app/index.js
      
      

      devDependencies of package.json:

      "devDependencies": {
          "babel-core": "^6.26.0",
          "babel-eslint": "^8.2.1",
          "babel-jest": "^22.1.0",
          "babel-loader": "^7.1.2",
          "babel-plugin-add-module-exports": "^0.2.1",
          "babel-plugin-dev-expression": "^0.2.1",
          "babel-plugin-flow-runtime": "^0.15.0",
          "babel-plugin-transform-class-properties": "^6.24.1",
          "babel-plugin-transform-es2015-classes": "^6.24.1",
          "babel-preset-env": "^1.6.1",
          "babel-preset-react": "^6.24.1",
          "babel-preset-react-hmre": "^1.1.1",
          "babel-preset-react-optimize": "^1.0.1",
          "babel-preset-stage-0": "^6.24.1",
          "babel-register": "^6.26.0",
          "chalk": "^2.3.0",
          "concurrently": "^3.5.1",
          "cross-env": "^5.1.3",
          "cross-spawn": "^6.0.4",
          "css-loader": "^0.28.9",
          "detect-port": "^1.2.2",
          "electron": "^1.7.11",
          "electron-builder": "^19.55.3",
          "electron-devtools-installer": "^2.2.3",
          "electron-rebuild": "^1.7.3",
          "enzyme": "^3.3.0",
          "enzyme-adapter-react-16": "^1.1.1",
          "enzyme-to-json": "^3.3.1",
          "eslint": "^4.16.0",
          "eslint-config-airbnb": "^16.1.0",
          "eslint-formatter-pretty": "^1.3.0",
          "eslint-import-resolver-webpack": "^0.8.4",
          "eslint-plugin-compat": "^2.2.0",
          "eslint-plugin-flowtype": "^2.42.0",
          "eslint-plugin-import": "^2.8.0",
          "eslint-plugin-jest": "^21.7.0",
          "eslint-plugin-jsx-a11y": "6.0.3",
          "eslint-plugin-promise": "^3.6.0",
          "eslint-plugin-react": "^7.6.1",
          "express": "^4.16.2",
          "extract-text-webpack-plugin": "^3.0.2",
          "fbjs-scripts": "^0.8.1",
          "file-loader": "^1.1.6",
          "flow-bin": "^0.64.0",
          "flow-runtime": "^0.16.0",
          "flow-typed": "^2.3.0",
          "identity-obj-proxy": "^3.0.0",
          "jest": "^22.1.4",
          "minimist": "^1.2.0",
          "node-sass": "^4.7.2",
          "npm-logical-tree": "^1.2.1",
          "react-test-renderer": "^16.2.0",
          "redux-logger": "^3.0.6",
          "rimraf": "^2.6.2",
          "sass-loader": "^6.0.6",
          "sinon": "^4.2.2",
          "spectron": "^3.8.0",
          "style-loader": "^0.20.1",
          "stylefmt": "^6.0.0",
          "stylelint": "^8.4.0",
          "stylelint-config-standard": "^18.0.0",
          "uglifyjs-webpack-plugin": "1.1.8",
          "url-loader": "^0.6.2",
          "webpack": "^3.10.0",
          "webpack-bundle-analyzer": "^2.9.2",
          "webpack-dev-server": "^2.11.1",
          "webpack-merge": "^4.1.1"
        }
      

      Could any show me why this occurs and how to solve it? Very much appreciated.

      Reviewed by caiski at 2018-04-12 06:27
    • 7. Bump handlebars from 4.5.1 to 4.7.6

      Bumps handlebars from 4.5.1 to 4.7.6.

      Changelog

      Sourced from handlebars's changelog.

      v4.7.6 - April 3rd, 2020

      Chore/Housekeeping:

      Compatibility notes:

      • Restored Node.js compatibility

      Commits

      v4.7.5 - April 2nd, 2020

      Chore/Housekeeping:

      • Node.js version support has been changed to v6+ Reverted in 4.7.6

      Compatibility notes:

      • Node.js < v6 is no longer supported Reverted in 4.7.6

      Commits

      v4.7.4 - April 1st, 2020

      Chore/Housekeeping:

      Compatibility notes:

      • No incompatibilities are to be expected

      Commits

      v4.7.3 - February 5th, 2020

      Chore/Housekeeping:

      • #1644 - Download links to aws broken on handlebarsjs.com - access denied (@Tea56)
      • Fix spelling and punctuation in changelog - d78cc73

      Bugfixes:

      • Add Type Definition for Handlebars.VERSION, Fixes #1647 - 4de51fe
      • Include Type Definition for runtime.js in Package - a32d05f

      Compatibility notes:

      Commits
      Maintainer changes

      This version was pushed to npm by erisds, a new releaser for handlebars since your current version.


      Dependabot compatibility score

      Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


      Dependabot commands and options

      You can trigger Dependabot actions by commenting on this PR:

      • @dependabot rebase will rebase this PR
      • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
      • @dependabot merge will merge this PR after your CI passes on it
      • @dependabot squash and merge will squash and merge this PR after your CI passes on it
      • @dependabot cancel merge will cancel a previously requested merge and block automerging
      • @dependabot reopen will reopen this PR if it is closed
      • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
      • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
      • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
      • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
      • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
      • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

      You can disable automated security fix PRs for this repo from the Security Alerts page.

      Reviewed by dependabot[bot] at 2020-09-06 16:49
    • 8. Bump elliptic from 6.4.0 to 6.5.3

      Bumps elliptic from 6.4.0 to 6.5.3.

      Commits

      Dependabot compatibility score

      Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


      Dependabot commands and options

      You can trigger Dependabot actions by commenting on this PR:

      • @dependabot rebase will rebase this PR
      • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
      • @dependabot merge will merge this PR after your CI passes on it
      • @dependabot squash and merge will squash and merge this PR after your CI passes on it
      • @dependabot cancel merge will cancel a previously requested merge and block automerging
      • @dependabot reopen will reopen this PR if it is closed
      • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
      • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
      • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
      • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
      • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
      • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

      You can disable automated security fix PRs for this repo from the Security Alerts page.

      Reviewed by dependabot[bot] at 2020-07-30 13:40
    • 9. Bump lodash from 4.17.15 to 4.17.19

      Bumps lodash from 4.17.15 to 4.17.19.

      Release notes

      Sourced from lodash's releases.

      4.17.16

      Commits
      Maintainer changes

      This version was pushed to npm by mathias, a new releaser for lodash since your current version.


      Dependabot compatibility score

      Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


      Dependabot commands and options

      You can trigger Dependabot actions by commenting on this PR:

      • @dependabot rebase will rebase this PR
      • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
      • @dependabot merge will merge this PR after your CI passes on it
      • @dependabot squash and merge will squash and merge this PR after your CI passes on it
      • @dependabot cancel merge will cancel a previously requested merge and block automerging
      • @dependabot reopen will reopen this PR if it is closed
      • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
      • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
      • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
      • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
      • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
      • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

      You can disable automated security fix PRs for this repo from the Security Alerts page.

      Reviewed by dependabot[bot] at 2020-07-16 20:48
    • 10. Default tabs show buttons between them

      When I starting implemented the "react-tabtab" component worked well and on the beginning don't appear it to me this, but on the progress of the project somehow this starting to showing.

      image

      How can I remove them?

      Reviewed by GabrielModog at 2020-01-07 13:08
    • 11. custom styled is not function

      I followed the guidelines in order to make my own style, However, I am getting the following error: TypeError: (0 , _reactTabtab2.default) is not a function import {styled} from 'react-tabtab'; let {TabListStyle, ActionButtonStyle, TabStyle, PanelStyle} = styled;

      TabListStyle = styled(TabListStyle)// write css;

      In order to fix the issue. I have to write like the following: import styled from 'styled-components'; import {styled as themeStyled} from 'react-tabtab'; let {TabListStyle, ActionButtonStyle, TabStyle, PanelStyle} = themeStyled;

      TabListStyle = styled(TabListStyle)// write css;

      "react": "^16.8.6", "react-dom": "^16.8.6", "styled-components": "^4.0.0" "react-tabtab": "^2.0.0",

      Reviewed by yonghuay at 2019-07-08 18:56
    • 12. Bump undefsafe from 2.0.2 to 2.0.5

      Bumps undefsafe from 2.0.2 to 2.0.5.

      Release notes

      Sourced from undefsafe's releases.

      v2.0.5

      2.0.5 (2021-10-17)

      Bug Fixes

      • remove debug and add tests (58fc474), closes #12
      Commits

      Dependabot compatibility score

      Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


      Dependabot commands and options

      You can trigger Dependabot actions by commenting on this PR:

      • @dependabot rebase will rebase this PR
      • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
      • @dependabot merge will merge this PR after your CI passes on it
      • @dependabot squash and merge will squash and merge this PR after your CI passes on it
      • @dependabot cancel merge will cancel a previously requested merge and block automerging
      • @dependabot reopen will reopen this PR if it is closed
      • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
      • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
      • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
      • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
      • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
      • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

      You can disable automated security fix PRs for this repo from the Security Alerts page.

      Reviewed by dependabot[bot] at 2022-02-10 00:45
    • 13. RTL support

      Hey man Is there any RTL support to react-tabtab? when i tried to set my body to rtl the entire tabs got ruined even the navigation arrows didnt work properly

      Reviewed by Mood-al at 2022-02-08 02:34
    • 14. Bump tmpl from 1.0.4 to 1.0.5

      Bumps tmpl from 1.0.4 to 1.0.5.

      Commits

      Dependabot compatibility score

      Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


      Dependabot commands and options

      You can trigger Dependabot actions by commenting on this PR:

      • @dependabot rebase will rebase this PR
      • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
      • @dependabot merge will merge this PR after your CI passes on it
      • @dependabot squash and merge will squash and merge this PR after your CI passes on it
      • @dependabot cancel merge will cancel a previously requested merge and block automerging
      • @dependabot reopen will reopen this PR if it is closed
      • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
      • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
      • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
      • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
      • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
      • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

      You can disable automated security fix PRs for this repo from the Security Alerts page.

      Reviewed by dependabot[bot] at 2021-09-21 02:02
    • 15. Bump path-parse from 1.0.5 to 1.0.7

      Bumps path-parse from 1.0.5 to 1.0.7.

      Commits

      Dependabot compatibility score

      Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


      Dependabot commands and options

      You can trigger Dependabot actions by commenting on this PR:

      • @dependabot rebase will rebase this PR
      • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
      • @dependabot merge will merge this PR after your CI passes on it
      • @dependabot squash and merge will squash and merge this PR after your CI passes on it
      • @dependabot cancel merge will cancel a previously requested merge and block automerging
      • @dependabot reopen will reopen this PR if it is closed
      • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
      • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
      • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
      • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
      • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
      • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

      You can disable automated security fix PRs for this repo from the Security Alerts page.

      Reviewed by dependabot[bot] at 2021-08-10 22:47
    • 16. Bump tar from 2.2.1 to 2.2.2

      Bumps tar from 2.2.1 to 2.2.2.

      Commits
      • 523c5c7 2.2.2
      • 7ecef07 Bump fstream to fix hardlink overwriting vulnerability
      • 9fc84b9 Use {} for hardlink tracking instead of []
      • 15e59f1 Only track previously seen hardlinks
      • 4f85851 Ignore potentially unsafe files
      • See full diff in compare view

      Dependabot compatibility score

      Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


      Dependabot commands and options

      You can trigger Dependabot actions by commenting on this PR:

      • @dependabot rebase will rebase this PR
      • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
      • @dependabot merge will merge this PR after your CI passes on it
      • @dependabot squash and merge will squash and merge this PR after your CI passes on it
      • @dependabot cancel merge will cancel a previously requested merge and block automerging
      • @dependabot reopen will reopen this PR if it is closed
      • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
      • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
      • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
      • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
      • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
      • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

      You can disable automated security fix PRs for this repo from the Security Alerts page.

      Reviewed by dependabot[bot] at 2021-08-03 22:09
    Headless, simple, and highly flexible tab-like primitives built with react hooks

    react-headless-tabs Headless and highly flexible tab-like primitives built with react hooks ?? Check out the documentation and interactive examples! F

    Jul 28, 2022
    A fully accessible, extravagantly flexible, React-powered Tab Panel component

    react-aria-tabpanel SEEKING CO-MAINTAINERS! Continued development of this project is going to require the work of one or more dedicated co-maintainers

    Aug 7, 2022
    Atom like draggable tab react component
    Atom like draggable tab react component

    React-draggable-tab Atom like draggable tab react component. Demo View Demo Installation npm install --save react-draggable-tab React v0.14 is support

    Apr 27, 2022
    React reusable tab component
    React reusable tab component

    react-re-super-tabs React reusable tab component Demo Installing yarn: yarn add react-re-super-tabs npm: npm install react-re-super-tabs --save Usage

    May 7, 2022
    A simple tab scroll view for react native

    react-native-tab-flatlist ReactNative 跨平台实现TabView嵌套ScrollView滚动吸顶效果,采用react-native-tab-view+flatlist实现效果丝滑 安装 使用前需要先安装react-native-tab-view 与 react-n

    Feb 23, 2022
    An accessible and easy tab component for ReactJS.

    react-tabs An accessible and easy tab component for ReactJS. https://reactcommunity.org/react-tabs/ Supports React 16.3.0 or newer react-tabs was test

    Aug 8, 2022
    A multi-tab layout manager
    A multi-tab layout manager

    FlexLayout FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved. Run the Demo Try it now

    Aug 1, 2022
    Fast, open and free-to-use new tab page for modern browsers
    Fast, open and free-to-use new tab page for modern browsers

    Mue Mue is a fast, open and free-to-use browser extension that gives a new, fresh and customisable tab page to modern browsers. Table of contents Scre

    Jul 12, 2022
    UseTabs - Reusable way to create smooth tab highlights
    UseTabs - Reusable way to create smooth tab highlights

    useTabs Reusable way to create smooth tab highlights. Installation Install my-pr

    Jul 31, 2022
    React-tabs-navigation is a nice react component that enables navigation through tabs in your web app.

    react-tabs-navigation This react component enables navigating through tabs in your web app. It is composed of three different parts: Banner This conte

    Aug 8, 2020
    Simple blacklist hook for react-navigation to toggle top/bottom tabs.

    react-navigation-blacklist Simple blacklist hook for react-navigation to toggle top/bottom tabs. Installation Make sure you have installed react-navig

    Nov 22, 2021
    React tabs with hooks

    @bumaga/tabs Headless tabs component for React Features ?? super small, 381 B vs 3.5kB react-tabs ?? no styles, just logic. Style what you want, as yo

    Jul 27, 2022
    Draggable atom-like tabs for React
    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 n

    Mar 27, 2022
    A React component used to render accessible and simple tabs

    Faster React Tabs Faster React Tabs is a flexible and context-agnostic React component used to render accessible and simple tabs. You can play with th

    May 30, 2022
    An accessible React tabs component

    React Accessible Tabs An accessible React tabs component, ported from my vanilla JS plugin. Demo See it in action. Usage Installation npm install reac

    Dec 4, 2020
    Declarative, modular and accessible React tabs component

    react-web-tabs Modular and accessible React tabs according to the WAI-ARIA Authoring Practices 1.1. Demo See the demo website for a live example. Docu

    Apr 29, 2022
    Tabs navigation component for React.

    Easy to use React tab component 3 different looks/themes Define transition speed or use the navigation in the bottom Nest tab components inside other

    Dec 10, 2018
    React Tabs component.
    React Tabs component.

    rc-tabs React Tabs component. Screenshot Example http://localhost:8000/examples online example: https://tabs.react-component.now.sh/ install Feature K

    Aug 8, 2022
    A React component for rendering tabbed content.

    A React component for rendering tabbed content.

    Jan 10, 2022