• Stars
    star
    3,089
  • Rank 14,566 (Top 0.3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated 26 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An accessible and easy tab component for ReactJS.

react-tabs npm version codecov

An accessible and easy tab component for ReactJS.

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

Version 5 or newer of react-tabs needs react version 18 or newer

Version 4 of react-tabs needs react version 16.8 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

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

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.

focusTabOnClick: boolean

default: true

By default the tab that is clicked will also be focused in the DOM. If set to false the tab will not be focused anymore.

Be aware that keyboard navigation will not work after click if set to false. Though one can still focus the tabs by pressing tab and then keyboard navigation will work.

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';

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

Set tabsRole

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
  • Tabs

Pass through properties

Note: 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. see {...otherProps} below.

import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
import type { ReactTabsFunctionComponent, TabProps } from 'react-tabs';

// All custom elements should pass through other props
const CustomTab: ReactTabsFunctionComponent<TabProps> = ({
  children,
  ...otherProps
}) => (
  <Tab {...otherProps}>
    <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>
);

License

MIT

More Repositories

1

react.dev

The React documentation website
TypeScript
11,041
star
2

react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM
JavaScript
10,160
star
3

react-router-redux

Ruthlessly simple bindings to keep react-router and redux in sync
JavaScript
7,808
star
4

react-modal

Accessible modal dialog component for React
JavaScript
7,350
star
5

react-rails

Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.
JavaScript
6,746
star
6

react-router-tutorial

JavaScript
5,523
star
7

rfcs

RFCs for changes to React
5,502
star
8

server-components-demo

Demo app of React Server Components.
JavaScript
4,242
star
9

react-basic

A description of the conceptual model of React without implementation burden.
4,181
star
10

react-codemod

React codemod scripts
JavaScript
4,164
star
11

react-docgen

A CLI and library to extract information from React component files for documentation generation purposes.
TypeScript
3,646
star
12

react-tutorial

Code from the React tutorial.
JavaScript
3,290
star
13

react-chartjs

common react charting components using chart.js
JavaScript
2,928
star
14

react-future

Specs & docs for potential future and experimental React APIs and JavaScript syntax.
JavaScript
2,819
star
15

express-react-views

This is an Express view engine which renders React components on server. It renders static markup and *does not* support mounting those views on the client.
JavaScript
2,734
star
16

react-a11y

Identifies accessibility issues in your React.js elements
JavaScript
2,343
star
17

React.NET

.NET library for JSX compilation and server-side rendering of React components
C#
2,293
star
18

react-autocomplete

WAI-ARIA compliant React autocomplete (combobox) component
JavaScript
2,165
star
19

react-art

React Bridge to the ART Drawing Library
JavaScript
1,994
star
20

react-php-v8js

PHP library that renders React components on the server
PHP
1,326
star
21

react-magic

Automatically AJAXify plain HTML with the power of React. It's magic!
JavaScript
947
star
22

zh-hans.react.dev

React documentation website in Simplified Chinese
TypeScript
909
star
23

core-notes

Weekly meeting notes from the React core team
900
star
24

ko.react.dev

React documentation website in Korean
TypeScript
715
star
25

ru.react.dev

React documentation website in Russian / Официальная русская версия сайта React
TypeScript
699
star
26

pt-br.react.dev

🇧🇷 React documentation website in Portuguese (Brazil)
TypeScript
484
star
27

react-lifecycles-compat

Backwards compatibility polyfill for React class components
JavaScript
459
star
28

react-gradual-upgrade-demo

Demonstration of how to gradually upgrade an app to a new version of React
JavaScript
421
star
29

id.react.dev

(Work in progress) React documentation website in Indonesian
TypeScript
312
star
30

react-timer-mixin

TimerMixin provides timer functions for executing code in the future that are safely cleaned up when the component unmounts
JavaScript
308
star
31

es.react.dev

React documentation website in Spanish / Documentación del sitio web de React en Español
TypeScript
283
star
32

translations.react.dev

Nexus of resources and tools for translating the React docs.
JavaScript
260
star
33

ja.react.dev

React documentation website in Japanese
TypeScript
258
star
34

react-static-container

Renders static content efficiently by allowing React to short-circuit the reconciliation process.
JavaScript
223
star
35

fa.react.dev

(Work in progress) React documentation website in Persian
TypeScript
190
star
36

tr.react.dev

React documentation website in Turkish
TypeScript
165
star
37

ar.react.dev

React documentation website in Arabic 📘⚛️ — وثائق React باللغة العربية
TypeScript
138
star
38

uk.react.dev

🇺🇦 React documentation website in Ukrainian / Офіційна українська версія сайту React
TypeScript
134
star
39

hi.react.dev

(Work in progress) React documentation website in Hindi
TypeScript
115
star
40

zh-hant.react.dev

(Work in progress) React documentation website in Traditional Chinese
TypeScript
106
star
41

bn.react.dev

(Work in progress) React documentation website in Bengali
TypeScript
102
star
42

fr.react.dev

Version française du site de documentation officiel de React
TypeScript
98
star
43

vi.react.dev

(Work in progress) React documentation website in Vietnamese
TypeScript
89
star
44

react-bower

[DISCONTINUED] Bower package for React
JavaScript
69
star
45

legacy.reactjs.org

An archived copy of the legacy React documentation website
JavaScript
62
star
46

bn.reactjs.org

(Work in progress) React documentation website in Bengali
JavaScript
54
star
47

ta.reactjs.org

(Work in progress) React documentation website in Tamil
JavaScript
52
star
48

pl.react.dev

React documentation website in Polish
TypeScript
49
star
49

az.react.dev

🇦🇿 React documentation website in Azerbaijani
TypeScript
43
star
50

rackt-codemod

Codemod scripts for Rackt libraries
JavaScript
40
star
51

th.reactjs.org

(Work in progress) React documentation website in Thai
JavaScript
40
star
52

mn.react.dev

(Work in progress) React documentation website in Mongolian
TypeScript
38
star
53

uz.reactjs.org

(Work in progress) React documentation website in Uzbek
TypeScript
36
star
54

de.react.dev

(Work in progress) React documentation website in German
TypeScript
35
star
55

ml.react.dev

(Work in progress) React documentation website in Malayalam
TypeScript
32
star
56

si.reactjs.org

(Work in progress) React documentation website in Sinhala
JavaScript
32
star
57

it.react.dev

(Work in progress) React documentation website in Italian
TypeScript
32
star
58

be.react.dev

(Work in progress) React documentation website in Belarusian
TypeScript
30
star
59

ur.reactjs.org

(⚠️ Beta Docs Translation only) React documentation website in Urdu. Check details in https://github.com/reactjs/ur.reactjs.org/issues/1#issuecomment-949791355
TypeScript
29
star
60

he.react.dev

(Work in progress) React documentation website in Hebrew
TypeScript
28
star
61

ku.reactjs.org

(Work in progress) React documentation website in Kurdish
JavaScript
28
star
62

ml.reactjs.org

(Work in progress) React documentation website in Malayalam
JavaScript
25
star
63

ur.react.dev

(Work in progress) React documentation website in Urdu
TypeScript
25
star
64

el.reactjs.org

(Work in progress) React documentation website in Greek
JavaScript
25
star
65

hu.react.dev

Hungarian 🇭🇺 React ⚛ documentation 📚 / React magyar dokumentációja
TypeScript
25
star
66

gu.react.dev

(Work in progress) React documentation website in Gujarati
TypeScript
24
star
67

pt-PT.reactjs.org

(Work in progress) React documentation website in Portuguese (Portugal) 🇵🇹
JavaScript
23
star
68

ne.reactjs.org

(Work in progress) React documentation website in Nepali
JavaScript
23
star
69

gu.reactjs.org

(Work in progress) React documentation website in Gujarati
JavaScript
22
star
70

te.reactjs.org

(Work in progress) React documentation website in Telugu
JavaScript
22
star
71

hy.reactjs.org

(Work in progress) React documentation website in Armenian - https://hy.reactjs.org
JavaScript
21
star
72

km.reactjs.org

(Work in progress) React documentation website in Central Khmer
JavaScript
20
star
73

bg.reactjs.org

(Work in progress) React documentation website in Bulgarian
JavaScript
16
star
74

ro.reactjs.org

(Work in progress) React documentation website in Romanian
JavaScript
16
star
75

si.react.dev

(Work in progress) React documentation website in Sinhala
TypeScript
14
star
76

kn.reactjs.org

(Work in progress) React documentation website in Kannada
JavaScript
13
star
77

tl.reactjs.org

(Work in progress) React documentation website in Tagalog
TypeScript
13
star
78

ka.reactjs.org

(Work in progress) React documentation website in Georgian
JavaScript
11
star
79

sv.reactjs.org

(Work in progress) React documentation website in Swedish
JavaScript
9
star
80

te.react.dev

(Work in progress) React documentation website in Telugu
TypeScript
9
star
81

sw.react.dev

(Work in progress) React documentation website in Swahili
TypeScript
9
star
82

nl.reactjs.org

(Work in progress) React documentation website in Dutch
JavaScript
8
star
83

ta.react.dev

(Work in progress) React documentation website in Tamil
TypeScript
8
star
84

ca.reactjs.org

(Work in progress) React documentation website in Catalan
JavaScript
7
star
85

lt.reactjs.org

(Work in progress) React documentation website in Lithuanian
JavaScript
6
star
86

ht.reactjs.org

(Work in progress) React documentation website in Haitian Creole
JavaScript
5
star
87

sr.reactjs.org

(Work in progress) React documentation website in Serbian
TypeScript
5
star
88

is.react.dev

(Work in progress) React documentation website in Icelandic
TypeScript
4
star
89

kk.react.dev

🇰🇿 React documentation website in Kazakh / React сайтының ресми қазақша нұсқасы
TypeScript
4
star
90

cs.react.dev

(Work in progress) React documentation website in Czech
TypeScript
4
star
91

sq.reactjs.org

(Work in progress) React documentation website in Albanian
TypeScript
3
star
92

sr.react.dev

(Work in progress) React documentation website in Serbian
TypeScript
3
star
93

reactjs.github.io

HTML
2
star
94

my.reactjs.org

(Work in progress) React documentation website in Burmese
JavaScript
2
star
95

lo.react.dev

(Work in progress) React documentation website in Lao
TypeScript
2
star
96

fi.react.dev

(Work in progress) React documentation website in Finnish
TypeScript
2
star
97

sw.reactjs.org

(Work in progress) React documentation website in Swahili
JavaScript
2
star
98

mk.react.dev

(Work in progress) React documentation website in Macedonian
TypeScript
1
star
99

tg.reactjs.org

(Work in progress) React documentation website in Tajik
TypeScript
1
star