An accessible and easy tab component for ReactJS.

Last update: Aug 8, 2022

react-tabs Build Status npm version Open Source Helpers

An accessible and easy tab component for ReactJS.

https://reactcommunity.org/react-tabs/

Supports React 16.3.0 or newer

react-tabs was tested on real mobile devices and browsers with
Browserstack

Installing

yarn add react-tabs

or

npm install --save react-tabs

You can also use react-tabs directly as UMD build in an HTML document by adding

<script src="https://unpkg.com/react-tabs/dist/react-tabs.development.js" />
<!-- or -->
<script src="https://unpkg.com/react-tabs/dist/react-tabs.production.min.js" />

For example usages of the UMD builds have a look at the old_examples/umd folder. The development UMD build also needs the package prop-types being loaded besides react.

Basic Example

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

export default () => (
  <Tabs>
    <TabList>
      <Tab>Title 1</Tab>
      <Tab>Title 2</Tab>
    </TabList>

    <TabPanel>
      <h2>Any content 1</h2>
    </TabPanel>
    <TabPanel>
      <h2>Any content 2</h2>
    </TabPanel>
  </Tabs>
);

API

resetIdCounter(): void

Allows reseting the internal id counter which is used to generate unique id's for tabs and tab panels.

You should never need to use this in the browser. Only if you are running an isomorphic react app that is rendered on the server you should call resetIdCounter() before every page render so that the ids that get generated on the server match the ids generated in the browser.

import { resetIdCounter } from 'react-tabs';

resetIdCounter();
ReactDOMServer.renderToString(...);

Components

react-tabs consists of 4 components which all need to be used together.

<Tabs />

If you specify additional props on the <Tabs /> component they will be forwarded to the rendered <div />.

className: string | Array<string> | { [string]: boolean }

default: "react-tabs"

Provide a custom class name for the outer <div /> of the tabs.

You can also supply an array of class names or an object where the class names are the key and the value is a boolean indicating if the name should be added. See the docs of classnames on how to supply different class names.

defaultFocus: boolean

default: false

If set to true the tabs will be focused on initial render. This allows immediate use of keyboard keys to switch tabs after the first render.

defaultIndex: number

default: 0

This allows changing the tab that should be open on initial render. This is a zero-based index, so first tab is 0, second tab is 1, ...

This can only be used in uncontrolled mode when react-tabs handles the current selected tab internally and for this reason cannot be used together with selectedIndex. See here for more info on modes.

direction: string

default: "ltr"

Provide the direction of the component, can be either rtl or ltr.

disabledTabClassName: string

default: "react-tabs__tab--disabled"

Provide a custom class name for disabled tabs.

This option can also be set directly at the <Tab /> component.

disableUpDownKeys: bool

default: false

Disable up & down arrow keys to change tabs.

domRef: (node: ?HTMLElement) => void

default: null

Register a callback that will receive the underlying DOM node for every mount. It will also receive null on unmount.

environment: Window

If you're rendering react-tabs within a different window context than the default one; for example, an iframe.

forceRenderTabPanel: boolean

default: false

By default only the current active tab will be rendered to DOM. If set to true all tabs will be rendered to the DOM always.

This can also be enabled for each individual <TabPanel /> component with its prop forceRender.

onSelect: (index: number, lastIndex: number, event: Event) => ?boolean

default: undefined

This event handler is called every time a tab is about to change. It will be called with the index that it will be changed to, the lastIndex which was selected before and the underlying event which is usually either a keydown or click event. When index and lastIndex are equal it means the user clicked on the currently active tab.

The callback can optionally return false to cancel the change to the new tab.

Returning false when the change to the new tab should be canceled is also important in controlled mode, as react-tabs still internally handles the focus of the tabs.

In controlled mode the onSelect handler is a required prop.

selectedIndex: number

default: null

Set the currently selected tab. This is a zero-based index, so first tab is 0, second tab is 1, ...

This enables controlled mode, which also requires onSelect to be set. See here for more info on modes.

selectedTabClassName: string

default: "react-tabs__tab--selected"

Provide a custom class name for the active tab.

This option can also be set directly at the <Tab /> component.

selectedTabPanelClassName: string

default: "react-tabs__tab-panel--selected"

Provide a custom class name for the active tab panel.

This option can also be set directly at the <TabPanel /> component.

<TabList />

If you specify additional props on the <TabList /> component they will be forwarded to the rendered <ul />.

className: string | Array<string> | { [string]: boolean }

default: "react-tabs__tab-list"

Provide a custom class name for the <ul />.

You can also supply an array of class names or an object where the class names are the key and the value is a boolean indicating if the name should be added. See the docs of classnames on how to supply different class names.

<Tab />

If you specify additional props on the <Tab /> component they will be forwarded to the rendered <li />.

className: string | Array<string> | { [string]: boolean }

default: "react-tabs__tab"

Provide a custom class name for the <li />.

You can also supply an array of class names or an object where the class names are the key and the value is a boolean indicating if the name should be added. See the docs of classnames on how to supply different class names.

disabled: boolean

default: false

Disable this tab which will make it not do anything when clicked. Also a disabled class name will be added (see disabledClassName)

disabledClassName: string

default: "react-tabs__tab--disabled"

Provide a custom class name for disabled tabs.

This option can also be set for all <Tab /> components with the prop disabledTabClassName on <Tabs />.

selectedClassName: string

default: "react-tabs__tab--selected"

Provide a custom class name for the active tab.

This option can also be set for all <Tab /> components with the prop selectedTabClassName on <Tabs />.

tabIndex: string

default: if selected "0" otherwise null

Overrides the tabIndex to enabled tabbing between tabs.

<TabPanel />

If you specify additional props on the <TabPanel /> component they will be forwarded to the rendered <div />.

className: string | Array<string> | { [string]: boolean }

default: "react-tabs__tab-panel"

Provide a custom class name for the <div /> containing the tab content.

You can also supply an array of class names or an object where the class names are the key and the value is a boolean indicating if the name should be added. See the docs of classnames on how to supply different class names.

forceRender: boolean

default: false

By default the tab content will only be rendered when the tab is active. If set to true the tab will also be rendered if inactive.

This can also be enabled for all <TabPanel /> components with the prop forceRenderTabPanel on <Tabs />.

selectedClassName: string

default: "react-tabs__tab-panel--selected"

Provide a custom class name for the active tab panel.

This option can also be set for all <TabPanel /> components with the prop selectedTabPanelClassName on <Tabs />.

Controlled vs Uncontrolled mode

React tabs has two different modes it can operate in, which change the way how much you need to take care about the state yourself.

Uncontrolled mode

This is the default mode of react-tabs and makes the react-tabs components handle its state internally. You can change the starting tab with defaultIndex and you can listen for changes with onSelect.

In this mode you cannot force a tab change during runtime.

<Tabs defaultIndex={1} onSelect={index => console.log(index)}>
  <TabList>
    <Tab>Title 1</Tab>
    <Tab>Title 2</Tab>
  </TabList>
  <TabPanel></TabPanel>
  <TabPanel></TabPanel>
</Tabs>

Controlled mode

This mode has to be enabled by supplying selectedIndex to the <Tabs /> component.

In this mode react-tabs does not handle any tab selection state internally and leaves all the state management up to the outer application.

This mode also enforces you to set a handler for onSelect. defaultIndex does not have any effect and will therefore throw an error.

const App = () => {
  const [tabIndex, setTabIndex] = useState(0);

  return (
    <Tabs selectedIndex={tabIndex} onSelect={index => setTabIndex(index)}>
      <TabList>
        <Tab>Title 1</Tab>
        <Tab>Title 2</Tab>
      </TabList>
      <TabPanel></TabPanel>
      <TabPanel></TabPanel>
    </Tabs>
  );
};

Styling

react-tabs does not include any style loading by default. Default stylesheets are provided and can be included in your application if desired.

Webpack

When using webpack and an appropriate loader (css-loader, sass-loader, less-loader or style-loader) you can simply import the default stylesheet.

import 'react-tabs/style/react-tabs.css';
// or
import 'react-tabs/style/react-tabs.scss';
// or
import 'react-tabs/style/react-tabs.less';

SASS

When using SASS you can easily import the default styles

@import '../../path/to/node_modules/react-tabs/style/react-tabs.scss';

LESS

When using LESS you can easily import the default styles

@import '../../path/to/node_modules/react-tabs/style/react-tabs.less';

UMD

When using the UMD version of react-tabs you can easily use the default styles by adding

<html>
  <head>
    ...
    <link rel="stylesheet" href="https://unpkg.com/react-tabs/style/react-tabs.css">
  </head>
  ...
</html>

Custom Style

You can also always just simply copy the default style to your own css/scss/less and modify it to your own needs. The changelog will always tell you when classes change and we also consider changes that break the styling as semver major.

Custom Components

In case you want to create your own component wrapping the ones that the library provides, you have to set its tabsRole. This value is used inside react-tabs to check the role of a component inside <Tabs />.

Possible values for tabsRole are:

  • Tab
  • TabPanel
  • TabList
import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';

const CustomTab = ({ children }) => (
  <Tab>
    <h1>{children}</h1>
  </Tab>
);

CustomTab.tabsRole = 'Tab'; // Required field to use your custom Tab

const App = () => (
  <Tabs>
    <TabList>
      <CustomTab>Custom Tab 1</CustomTab>
      <CustomTab>Custom Tab 2</CustomTab>
    </TabList>
    <TabPanel>Panel 1</TabPanel>
    <TabPanel>Panel 2</TabPanel>
  </Tabs>
);

This works for custom tabs, but will not suffice for something like a TabPanel. Because of how react-tabs works internally (it uses cloning to opaquely control various parts of the tab state), you need to pass any incoming props to the component you're wrapping. The easiest way to do this is to use the rest and spread operators, e.g.:

const CustomTabPanel = ({ children, myCustomProp, ...otherProps }) => (
  <TabPanel {...otherProps}>
    <h1>{children}</h1>
    {myCustomProp && `myCustomProp: ${myCustomProp}`}
  </TabPanel>
)

CustomTabPanel.tabsRole = 'TabPanel'

License

MIT

GitHub

https://github.com/reactjs/react-tabs
Comments
  • 1. Server side rendering checksum error

    Hi there is a checksum error when using serverside rendering.. (client) tab" id="react-tabs-0" aria-selected="tr (server) tab" id="react-tabs-4" aria-selected="tr

    Any ideas what it could be?

    Reviewed by jamesjjk at 2015-11-29 16:41
  • 2. Possibility to add non React-Tabs elements in

    I'm looking to add an effect similar to the one used in material-ui tabs, with a div moving from one to the other. This specific example would require me to add an element in the DOM, and React-Tabs throw for that.

    Would it be possible to change that? Perhaps adding a specific class to a div if you want to be sure that it's not made by mistake, or exporting another component that can be instanciated in the DOM? What's your take on it? I kind of like the second solution, seems to be cleaner.

    I'm willing to submit a PR for that!

    Reviewed by AugustinLF at 2016-07-05 08:51
  • 3. Flag to use display:none instead of mount/unmount

    Hello,

    React-Tabs works by mounting/unmounting the active/inactive tabs and this is exactly how it should behave. Unfortunately, I've ran into a situation where I absolutely need an inactive tab to be in the DOM. It seems like it would be reasonably simple to add a flag on the Tabs component that would decide between using the mount/unmount method vs using the good ol' style=display:none method.

    Any chance we could add that in?

    The situation causing the issue is that I have a bunch of clients who had a particular form customized in the old system. To avoid breaking all their forms without doing any real work, I'm just going to stick the old form in the DOM and serialize what's in the DOM when they hit submit button. This form is in a tab though, so it doesn't work when the tab is inactive.

    Thanks!

    Reviewed by Pongetti at 2016-08-22 16:31
  • 4. Can't use Tabs in another Tabs

    <Tabs selectedIndex={1}>
                  <TabList>
                    <Tab>Disclosure Req.</Tab>
                    <Tab>Page Instructions</Tab>
                  </TabList>
                  <TabPanel>
                    <Instructions sectionName="DisclosuresRequirements" source="disclosures/instruction" />
                  </TabPanel>
                  <TabPanel>
                    <Tabs selectedIndex={1}>
                      <TabList>
                        <Tab>Disclosure Req.</Tab>
                        <Tab>Page Instructions</Tab>
                     </TabList>
                      <TabPanel>
                        <Instructions sectionName="DisclosuresRequirements" source="disclosures/instruction" />
                      </TabPanel>
                      <TabPanel>
                        <Instructions sectionName="EffortSummary" source="effort/instruction" />
                      </TabPanel>
                    </Tabs>
                  </TabPanel>
                </Tabs>
    

    When I click on inner second Tab it change parent second tab. Who can help me with this problem?

    Reviewed by alexisinwork at 2015-11-17 15:16
  • 5. flicker problem in iphone6 plus

    when i switched the tabs,the tabs background have a flicker in the whole tab area,the background is #333,the opacity is about 0.3.is iphone6 plus‘s trouble?

    Reviewed by carrollcai at 2017-06-14 01:10
  • 6. Tab Panel animation

    Hi, I'm using react-tabs disabling the default styling and with my custom classes. I'd like to animate the tab panel entering with a fade-in or something like that, but nothing happens. Here my sass rules: .l-tabs__panel { opacity: 0; transform: translateY(20%); transition: opacity $transition-timing $transition-easing, transform $transition-timing $transition-easing; &[class*='--selected'] { opacity: 1; transform: translateY(0); } }

    I tried also with ReactCSSTransitionGroup in this way: <TabPanel> <ReactCSSTransitionGroup transitionName="fade-in" transitionEnterTimeout={250} transitionLeaveTimeout={250} > {myContent} </ReactCSSTransitionGroup> </TabPanel>

    but nothing happens, when I select between my tabs. Please is there someone who could help me?

    Thanks

    Reviewed by timhecker at 2016-09-21 08:04
  • 7. Cannot find module '@babel/core' when running npm start after clonning

    Hello,

    I just cloned the repo and installed dependencies then npm started. I'm getting the following error

    Module build failed: Error: Cannot find module '@babel/core'
        at Function.Module._resolveFilename (module.js:555:15)
        at Function.Module._load (module.js:482:25)
        at Module.require (module.js:604:17)
        at require (internal/module.js:11:18)
        at Object.<anonymous> (/Users/mustafa/Code/SandBox/react-tabs/node_modules/babel-core/index.js:2:18)
        at Module._compile (module.js:660:30)
        at Object.Module._extensions..js (module.js:671:10)
        at Module.load (module.js:573:32)
        at tryModuleLoad (module.js:513:12)
        at Function.Module._load (module.js:505:3)
        at Module.require (module.js:604:17)
        at require (internal/module.js:11:18)
        at Object.<anonymous> (/Users/mustafa/Code/SandBox/react-tabs/node_modules/babel-loader/lib/index.js:3:13)
        at Module._compile (module.js:660:30)
        at Object.Module._extensions..js (module.js:671:10)
        at Module.load (module.js:573:32)
     @ multi (webpack)-dev-server/client?http://localhost:7878 ./app.js
    

    i event installed babel-core again but still no luck

    Reviewed by mwmcode at 2018-01-23 11:40
  • 8. Allows arbitrary components anywhere inside

    This is a follow-up feature to #123, which allowed adding arbitrary components after a <TabList>'s <Tab>s.

    Now you can put components anywhere inside <TabList> and everything should work as expected.

    My use case was that I needed a logo-ish before the tabs. Tab group separators is another example.

    Reviewed by alexanderwallin at 2016-09-28 14:17
  • 9. Replace className?

    Hi, what speaks against replacing the className in Tabs, TabList, Tab, TabPanel rather than extending them? I changed the classes the way I like them .. but still have the BEM-styled classes in the DOM. For the sake of beauty of the code, is there a need for the BEM-Classes?

    Reviewed by schoenwaldnils at 2017-02-14 16:15
  • 10. when set state on selected, tabs dont change

    So, when i try to so this.setState({}) on select, the code in handleSelected will be executed but the tabs will stop changing.

    
      handleSelected(index, last) {
        console.log('Selected tab: ' + index + ', Last tab: ' + last);
        if (index == 1) {
    
          console.log(index);
          this.setState({paymentType: 'paypal'})
        }
        else {
    
          this.setState({paymentType: 'creditcard'})
        }
      }
    
    Reviewed by shangsunset at 2015-11-02 22:50
  • 11. Programmatically Focus Tab Component

    Is there a way to programatically focus the <li> element in the <Tab /> component. When using the arrow keys to switch tabs in uncontrolled mode, the tab will switch but focus will be lost. Is there a way to set the focus in the onSelect callback?

    Reviewed by sepehr500 at 2017-10-06 22:32
  • 12. Possible to disable using TabPanel when in controlled mode?

    Just wondering if it is possible to configure so I don't get an warning error there should be the same number of Tabs as TabPanels. Thanks for the simple to use and highly useful library!

    Reviewed by AshtonEngberg at 2022-07-15 16:27
  • 13. React-tabs closes React-select (onclick)

    Component React-tabs closes the React-select list when the tab is clicked. When adding a regular div and calling onclick, select works fine without closing. What should i do to keep select open after changing tab? Screenshot_98 Screenshot_97

    Reviewed by Oskar-Widelab at 2022-06-20 10:45
  • 14. keyboard accessibility of https://reactcommunity.org/react-tabs/

    currently, there are two quite fundamental keyboard access issues on the demo page at https://reactcommunity.org/react-tabs/

    • the <textarea> containing the source swallows Tab presses. once focus is in the textarea, there's no way for a keyboard user to jump back out. worse, even if the related "view source" checkbox is not checked, i.e. the textarea isn't visible, it still receives keyboard focus/is still in the regular tab cycle
    • when the tab/tablist receives focus, there is no visible focus indication that this is actually the case

    Video showing the issue (using Chrome on Windows)

    https://user-images.githubusercontent.com/895831/173188543-011a8b79-d55b-4eeb-b907-1fb9b0033cf9.mp4

    0:00 - 0:25 tabbing through the page. note the focus disappears after the "View source" checkbox. ticking the checkbox with the mouse, and carrying on tabbing, shows that tab was in the textarea (and it's stuck in there) 0:25 - 0:32 focus is on the tab/tablist, can use cursor keys to change active tab. but there's no visible indication that focus is indeed on that tab/tablist

    Reviewed by patrickhlauke at 2022-06-11 12:48
  • 15. about prop types

    I did not understand about your prop type ? from where you import it and what is the purpose of using this? thank you in advance, i am new in react, your help will be much appreciate!

    Reviewed by pinkyjannat at 2022-05-08 13:24
  • 16. No content after refresh

    When Im on different tab than first, when I refresh the page, there is weird error where no content on any tab is visible, and first tab is underlined as active. image

    As you can see in the picture there is content in console in third tab, but the panel is not active. Can you give me inside on this?

    I can share the code.

    For url params i use use-query-params

    Reviewed by KMika-Sages at 2022-04-27 12:21
  • 17. Enable references to Tabs

    The Problem

    I am using react tabs to create a simple tab view stepper where the user has to fill in a form in each of the steps.

    While developing the UI, I tried to make the tabs responsive by allowing for scrolling which I am still busy developing, but seems to be working fairly well at the moment. My only problem is that if I set selectedIndex to a tab that is not within view, the TabList will not update to show that Tab heading.

    Current design: image

    I decided that to fix this problem I would make use of useEffect, React refs and some javascript document manipulation (ie document.scrollToView), unfortunately, I am unable to get an instance of the tab elements so that I can call scrollIntoView; I have also considered accessing the scrollLeft property of the containing element (ie TabList), but there is ref function available for that element and I would still need access to the child Tab element to tell how much the TabList should scroll.

    The Solutions

    After realising the problem, I went straight to your code to see if there was any way to accomplish what I set out to do. This led to me creating my own types for the package because the version of @types/react-tabs currently available is made for react-tabs 2.3 (or something like that) while the latest version of react-tabs is version 3.2.3.

    I then looked throughout the codebase and realised that there was a perfect infrastructure for getting access to the tab inside the UncontrolledTabs.js file, with the only problem being that there was no way of actually getting access to the particular instance of UncontrolledTabs that was being rendered. An alternative to using the instance of the UncontrolledTabs class would be to have direct ref access to the tabs themselves, which is possible and would be a very simple change to make.

    Option 1: Getting access to the UncontrolledTabs instance.

    Option 1.1: Getting instance using domRef

    In the code for the Tabs component, there is a property called domRef which is a function that gets passed directly to UncontrolledTabs and which gets called when creating the dom element for the UncontrolledTabs component.

    UncontrolledTabs.js (lines 374 - 397)

          selectedTabClassName, // unused
          selectedTabPanelClassName, // unused
          environment, // unused
          disableUpDownKeys, // unused
          ...attributes
        } = this.props;
    
        return (
          <div
            {...attributes}
            className={cx(className)}
            onClick={this.handleClick}
            onKeyDown={this.handleKeyDown}
            ref={(node) => {
              this.node = node;
              *** if (domRef) domRef(node);
            }}
            data-rttabs
          >
            {this.getChildren()}
          </div>
        );
      }
    }
    

    Inside UncontrolledTabs, you can add a static function, e.g. getInstanceFromDomRef(node: HTMLDivElement), this function would basically see if the supplied node is the same as the node of that instance and would then return that instance of the component.

    Basically, you would add the following as a function to the UncontrolledTabs class:

    static getInstanceFromDomRef(node) {
        if (node === this.node) return this;
        return null;
    }
    

    Option 1.2: Adding componentRef property

    This option is self-explanatory, you would include a componentRef property to the Tabs component which would lead to an instance of either the Tabs or UncontrolledTabs components which could then be used to access the necessary methods.

    Option 2: Allow custom tabRef functions to be passed to Tabs that are children of UncontrolledTabs

    In the UncontrolledTabs file, there is a function called getChildren which loops through all of the children passed to the UncontrolledTabs component and ensures that they meet certain criteria while also modifying them slightly. For the Tab component, UncontrolledTabs takes the supplied Tab component and changes the tabRef function to a custom one used by UncontrolledTabs, thus removing the tabRef function supplied by the developer, to fix this would be as simple as the following:

    UncontrolledTabs.js (lines 222 - 246)

            result = cloneElement(child, {
              children: deepMap(child.props.children, (tab) => {
                const key = `tabs-${listIndex}`;
                const selected = selectedIndex === listIndex;
    
                const props = {
                  tabRef: (node) => {
                    this.tabNodes[key] = node;
    +++             if (tab.props.tabRef) tab.props.tabRef(node)
                  },
                  id: this.tabIds[listIndex],
                  panelId: this.panelIds[listIndex],
                  selected,
                  focus: selected && (focus || wasTabFocused),
                };
    
                if (selectedTabClassName)
                  props.selectedClassName = selectedTabClassName;
                if (disabledTabClassName)
                  props.disabledClassName = disabledTabClassName;
    
                listIndex++;
    
                return cloneElement(tab, props);
              }),
            });
    

    Those are my suggested solutions which should be a partial fix to the problem of programmatically managing the scroll of the TabList container.

    This is a great package and is really useful for quickly creating tabs.

    Reviewed by CodeKop at 2022-01-25 11:35
Related tags
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
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
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
💃 Make your react tab dance🕺
💃 Make your react tab dance🕺

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-compon

Jul 18, 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
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
Add collapsible headers to your tab-view components.
Add collapsible headers to your tab-view components.

React Native Head Tab View ?? ?? ?? v4.0.0-rc.13 has been released, I hope you can help me test and collect questions. In this version, there is a big

Aug 8, 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
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
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
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
🧲 Light, zero dependencies magnetic board component using HTML5 canvas
🧲 Light, zero dependencies magnetic board component using HTML5 canvas

React Magnetic Board Light, zero dependencies magnetic board component using HTML5 canvas ?? Demo Demos created with React DemoTab ?? Install npm inst

Feb 12, 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
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
Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar

react-native-scrollable-tab-view This is probably my favorite navigation pattern on Android, I wish it were more common on iOS! This is a very simple

Jul 30, 2022
React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)
React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)

react-native-tabs React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons) Why I need t

Jul 12, 2022
❄️ Winterly Tab ❄️ Beautifully replace new tab screen with winter themed background.
❄️ Winterly Tab ❄️ Beautifully replace new tab screen with winter themed background.

Beautifully replace the new-tab page in your web browser with winter-themed background. It's free & open source!

Jan 23, 2022