react-tabs: Accessible React tab component

react-tabs: Accessible React tab component

  • This is a zero-based index, so first tab is , second tab is , …

    By default only the current active tab will be rendered to DOM.

  • Provide a custom class name for the active tab.
  • Provide a custom class name for the active tab panel.
  • Also a disabled class name will be added (see )

    Provide a custom class name for the active tab.

  • Provide a custom class name for the active tab panel.

react-tabs – React tabs component

@fullstackreact: react-tabs: Accessible React tab component

Accessible react tab component

Supports React 0.14.9+ and 15.3+

You can also still use npm

Or use directly in your html as UMD component

(TODO: This demos are outdated and use super old versions of react and react-tabs)

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

before every render so that the ids that get generated on the server match the ids generated in the browser.

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

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.

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

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

. See here for more info on modes.

Provide a custom class name for disabled tabs.

component.

all tabs will be rendered to the DOM always.

or

are equal it means the user clicked on the currently active tab.

to cancel the change to the new tab.

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.

handler is a required prop.

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

to be set. See here for more info on modes.

Provide a custom class name for the active tab.

component.

Provide a custom class name for the active tab panel.

component.

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.

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.

Provide a custom class name for disabled tabs.

Provide a custom class name for the active tab.

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.

the tab will also be rendered if inactive.

Provide a custom class name for the active tab panel.

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.

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

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.

does not have any effect and will therefore throw an error.

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

) you can simply import the default stylesheet.

When using SASS you can easily import the default styles

When using LESS you can easily import the default styles

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.

MIT

GitHub