A minimalist, accessible React tabs component.
npm install @almostbearded/react-tabs
npm install @almostbearded/react-tabs
`
Basic Usage
Import the Tabs component from the @almostbearded/react-tabs package:
`
import { Tabs } from '@almostbearded/react-tabs'
`
The currently selected tab could itself be stored in a state variable or derived from one. For example, to store the selected tab in state:
`
const [selectedTab, setSelectedTab] = useState('default-tab-id')
`
Afterwards, the Tabs component can simply be used in other components:
`
{ id: 'tab-1', title: 'Tab 1', content: 'Content of Tab 1' },
{ id: 'tab-2', title: 'Tab 2', content: 'Content of Tab 2' },
]}
selectedTab={selectedTab}
onSelectTab={setSelectedTab} />
`
It is also possible to pass more complex nodes to the title and content props:
`
{
id: 'tab-1',
title: Tab 1
,
content: Complex content of tab 1
},
{
id: 'tab-2',
title: Tab 2
,
content: Complex content of tab 2
},
]}
selectedTab={selectedTab}
onSelectTab={setSelectedTab} />
`
API
The Tabs component can be configured via a number of props:
- The tabs prop is an array containing the configuration of the titles and contents of tabs. Every tab consists of an unique id, a title shown in the tab, and content shown in the panel linked to a tab.
- The selectedTab prop defines which tab is currently selected and therefore which content is currently shown.
- The onSelectTab prop takes a callback that is invoked with the id of the newly selected tab, whenever a user clicks one of the tabs.
Demos
The following demos show the Tabs` component being used with different configurations.