react-a11y-context-tabs

React tab component which is accessible and can be nested within other HTML elements.

Getting started

npm install --save react-a11y-context-tabs

Why?

Other React tab component packages such as react-tabs are great, but do not work when nesting your <Tab /> components in another HTML element.

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

export default () => (
  <Tabs>
    <TabList>
      <Tab>Tab 1</Tab>
      <Tab>Tab 2</Tab>
      <div>
        {/* Tab 3 and 4 do not work as expected */}
        <Tab>Tab 3</Tab>
        <Tab>Tab 4</Tab>
      </div>
    </TabList>

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

react-context-a11y-tabs are accessible and allows nesting your tabs in other HTML elements.

import { Tab, Tabs, TabPanel } from 'react-a11y-context-tabs';

export default () => (
  <Tabs>
    <Tab id="one">Tab 1</Tab>
    <Tab id="two">Tab 2</Tab>
    <div>
      {/* Tab 3 and 4 work as expected 😀 */}
      <Tab id="three">Tab 3</Tab>
      <Tab id="four">Tab 4</Tab>
    </div>

    <TabPanel id="one">
      <h2>Any content 1</h2>
    </TabPanel>
    <TabPanel id="two">
      <h2>Any content 2</h2>
    </TabPanel>
    <TabPanel id="three">
      <h2>Any content 3</h2>
    </TabPanel>
    <TabPanel id="four">
      <h2>Any content 4</h2>
    </TabPanel>
  </Tabs>
);

API

Tab

Props	Description	Default
id	(String) A unique ID which should also be added to its corresponding TabPanel	Required
innerRef	(Function) A function to get the ref of the wrapper <div /> element	None
className	(String) HTML class attribute	"react-tabs__tab"

TabPanel

Props	Description	Default
id	(String) A unique ID which should also be added to its corresponding Tab	Required
className	(String) HTML class attribute	"react-tabs__tabPanel"

Tabs

Props	Description	Default
selectedTabClassName	(String) The className given to the active <Tab />	"react-tabs__tab--selected"
selectedTabPanelClassName	(String) The className given to the active <TabPanel />	"react-tabs__tab-panel--selected"
forceRenderTabPanel	(Boolean) By default, the contents of <TabPanel />s that are not active are not rendered in the DOM. Set this to true to force it to render	false
onSelect	(Function) A function that is called whenever a new <Tab /> is selected. The function is called with the ID of the new <Tab /> as its argument	() => {}
selectedId	(String) Make <Tabs /> into a controlled component. Set the ID of the <Tab /> you want to be active.
innerRef	(Function) A function to get the ref of the wrapper <div /> element	None

Demo

• Uncontrolled component
• Controlled component
• forceRenderTabPanel with CSS styles