Skip to content

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

License

Notifications You must be signed in to change notification settings

newyork-anthonyng/react-a11y-context-tabs

Repository files navigation

Travis build status Codecov branch npm downloads MIT License

gzip size size

Maintainability PRs Welcome

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published