react-a11y-context-tabs-a11y

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

See this CodeSandbox demo.