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'; <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'; <Tabs> <Tab ="one">Tab 1</Tab> <Tab ="two">Tab 2</Tab> <div> /* Tab 3 and 4 work as expected 😀 */ <Tab ="three">Tab 3</Tab> <Tab ="four">Tab 4</Tab> </div> <TabPanel ="one"> <h2>Any content 1</h2> </TabPanel> <TabPanel ="two"> <h2>Any content 2</h2> </TabPanel> <TabPanel ="three"> <h2>Any content 3</h2> </TabPanel> <TabPanel ="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.