React context tabs
A flexible and unopinionated tab interface for React. Tabs and panes to be provided in any order or nesting. Inactive panels can be either unmounted or just hidden from view. Includes an optional minimal base stylesheet, but leaves aesthetics up to you.
Table of Contents
- Install
- Usage
- Basic example
- Controlled tabs
- Nesting
- Styles
- API
TabsTabListTabTabPanelPersistentTabPanel- Contribute
- License
Install
npm install react-context-tabs --saveUsage
Basic example
Straight forward tabs!
import React from 'react'
import { Tab, TabList, Tabs, TabPanel } from 'react-context-tabs'
export default function TabExample() {
return (
<Tabs defaultTabId='home'>
<TabList>
<Tab tabId='home'>React context tabs</Tab>
<Tab tabId='about'>What is it?</Tab>
<Tab tabId='issues'>I have a problem</Tab>
</TabList>
<TabPanel tabId='home'>
<p>
Flexible tabs for React
</p>
</TabPanel>
<TabPanel tabId='about'>
<p>
A fine React library
</p>
</TabPanel>
<TabPanel tabId='issues'>
<p>
Problem? Try our
<a href="https://github.com/usabilityhub/react-context-tabs/issues">issues</a> page.
</p>
</TabPanel>
</Tabs>
)
}Controlled tabs
Tabs can be either "controlled" or "uncontrolled". Controlled tabs require a selectedTabId property.
import React, { Component } from 'react'
import { Tab, TabList, Tabs, TabPanel } from 'react-context-tabs'
function getHash() {
return window.location.hash.slice(1)
}
class HashControlledTabs extends Component {
constructor(props) {
super(props)
this.state = { selectedTabId: getHash() }
this.handleHashChange = this.handleHashChange.bind(this)
this.handleTabChange = this.handleTabChange.bind(this)
}
componentDidMount() {
window.onhashchange = this.handleHashChange
}
componentWillUnmount() {
window.onhashchange = null
}
handleHashChange(event) {
this.setState({ selectedTabId: getHash() })
}
handleTabChange(nextTab, prevTab) {
window.location.hash = nextTab
}
render() {
const { selectedTabId } = this.state
return (
<Tabs
selectedTabId={selectedTabId}
onTabChange={this.handleTabChange}
>
<TabList>
<Tab tabId='happy'>Happy</Tab>
<Tab tabId='sad'>Sad</Tab>
</TabList>
<TabPanel tabId='happy'>
<span style={{ fontSize: '100px', transform: 'rotate(0.25turn)' }}>
:)
</span>
</TabPanel>
<TabPanel tabId='sad'>
<span style={{ fontSize: '100px', transform: 'rotate(0.25turn)' }}>
:(
</span>
</TabPanel>
</Tabs>
)
}
}Nesting
Thanks to React's context feature, children can be re-ordered or nested as you please.
import React from 'react'
import { Tab, TabList, Tabs, TabPanel } from 'react-context-tabs'
function CharacterInformation({ warrior, wizard }) {
return (
<Tabs defaultTabId='warrior'>
<section className='characterInfo'>
<TabPanel tabId='warrior'>
<CharacterStats stats={warrior.stats} />
</TabPanel>
<TabPanel tabId='wizard'>
{/* Tabception */}
<Tabs defaultTabId='stats'>
<TabList>
<Tab tabId='stats'>Stats</Tab>
<Tab tabId='spells'>Spells</Tab>
</TabList>
<TabPanel tabId='stats'>
<CharacterStats stats={wizard.stats} />
</TabPanel>
<TabPanel tabId='spells'>
<CharacterSpells spells={wizard.spells} />
</TabPanel>
</Tabs>
</TabPanel>
</section>
{/* Children can be any old component */}
<marquee>Select your character!</marquee>
{/* Tabs come after panels */}
<section className='characterSelection'>
<TabList>
<Tab tabId='warrior'>
Warrior
</Tab>
<Tab tabId='wizard'>
Wizard
</Tab>
</TabList>
</section>
</Tabs>
)
}Styles
A base style sheet is included in the build at /lib/styles/base.css. This just sets appropriate cursor and removes default list styles (for the TabList). You'll still need to write your own CSS to make the tabs look how you want.
Each component has a default class name that is the same as its component name. eg:
<div class="Tabs">
<ul class="TabList">
<li class="Tab isSelected">First</li>
<li class="Tab">Second</li>
</ul>
<section className="TabPanel">
First content
</section>
<!--
<section className="TabPanel">
Second content
</section>
-->
</div>Note that PersistentTabPanel and TabPanel both have the same class: TabPanel.
API
Tabs
Parent container to which child components are passed. Tabs can be either "controlled" or "uncontrolled". Supply either defaultTabId for uncontrolled or selectedTabId for controlled.
import { Tabs } from 'react-context-tabs'
import Tabs from 'react-context-tabs/Tabs'// controlled
<Tabs
selectedTabId={this.state.selectedTabId}
onTabChange={(nextTabId, prevTabId) =>
this.setState({ selectedTadId: nextTabId })
}
>
{/* ... */}
</Tabs>
// uncontrolled
<Tabs defaultTabId={initialTabId}>
{/* ... */}
</Tabs>Props
defaultTabId:any- ThetabIdof the initially selected tab when uncontrolled.selectedTabId:any- ThetabIdof the currently selected tab when controlled.onTabChange:(nextTabId, prevTabId) =>- Called when the tab changes. Optional for uncontrolled tabs.
TabList
A wrapper component for Tabs. This is just a ul.
import { TabList } from 'react-context-tabs'
import TabList from 'react-context-tabs/TabList'<TabList>
<Tab tabId='inbox'>Inbox</Tab>
<Tab tabId='outbox'>Outbox</Tab>
<Tab tabId='sent'>Sent</Tab>
</TabList>Tab
An individual tab. Has CSS class Tab, and isSelected or isDisabled.
import { Tab } from 'react-context-tabs'
import Tab from 'react-context-tabs/Tab'<Tab tabId='home'>
<Icon icon='house' />
Home
</Tab>Props
tabId:any- The ID of theTabPanelto show when clicked.disabled:bool- Disallow clicking on this tab.tabindex:number- Allow this tab to be selected with tab. See MDNtabindexreference.
TabPanel
Container for each tab's content. TabPanels are removed from the DOM when inactive.
TabPanel can be used as children of a ReactCSSTransitionGroup.
import { TabPanel } from 'react-context-tabs'
import TabPanel from 'react-context-tabs/TabPanel'<TabPanel tabId='avatar'>
<img src={`/images/avatars/${user.id}.jpeg`} />
<span>{ user.name }</span>
</TabPanel>Props
tabId:any- The ID of theTabthat will reveal this panel.
PersistentTabPanel
An alternative to TabPanel. PersistentTabPanel is not removed from the DOM when inactive. Instead it is set to display: none. Children will not be rendered until the tab is first revealed.
These panels are useful for tabs that are computationally expensive to render, or need to persist internal state while deselected.
import { PersistentTabPanel } from 'react-context-tabs'
import PersistentTabPanel from 'react-context-tabs/PersistentTabPanel'Props
tabId:any- The ID of theTabthat will reveal this panel.
Contribute
Questions, bug reports and pull requests welcome. See GitHub issues.
License
MIT