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
Tabs
TabList
Tab
TabPanel
PersistentTabPanel
- Contribute
- License
Install
npm install react-context-tabs --save
Usage
Basic example
Straight forward tabs!
import React from 'react'import Tab TabList Tabs TabPanel from 'react-context-tabs' { return <Tabs ='home'> <TabList> <Tab ='home'>React context tabs</Tab> <Tab ='about'>What is it?</Tab> <Tab ='issues'>I have a problem</Tab> </TabList> <TabPanel ='home'> <p> Flexible tabs for React </p> </TabPanel> <TabPanel ='about'> <p> A fine React library </p> </TabPanel> <TabPanel ='issues'> <p> Problem? Try our <a ="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' { return windowlocationhash} { thisstate = selectedTabId: thishandleHashChange = thishandleHashChange thishandleTabChange = thishandleTabChange } { windowonhashchange = thishandleHashChange } { windowonhashchange = null } { this } { windowlocationhash = nextTab } { const selectedTabId = thisstate return <Tabs = = > <TabList> <Tab ='happy'>Happy</Tab> <Tab ='sad'>Sad</Tab> </TabList> <TabPanel ='happy'> <span => : </span> </TabPanel> <TabPanel ='sad'> <span => : </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' { return <Tabs ='warrior'> <section ='characterInfo'> <TabPanel ='warrior'> <CharacterStats = /> </TabPanel> <TabPanel ='wizard'> /* Tabception */ <Tabs ='stats'> <TabList> <Tab ='stats'>Stats</Tab> <Tab ='spells'>Spells</Tab> </TabList> <TabPanel ='stats'> <CharacterStats = /> </TabPanel> <TabPanel ='spells'> <CharacterSpells = /> </TabPanel> </Tabs> </TabPanel> </section> /* Children can be any old component */ <marquee>Select your character!</marquee> /* Tabs come after panels */ <section ='characterSelection'> <TabList> <Tab ='warrior'> Warrior </Tab> <Tab ='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:
First Second First content <!-- <section className="TabPanel"> Second content </section>-->
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.
// controlled<Tabs = => /* ... */</Tabs> // uncontrolled<Tabs => /* ... */</Tabs>
Props
defaultTabId
:any
- ThetabId
of the initially selected tab when uncontrolled.selectedTabId
:any
- ThetabId
of the currently selected tab when controlled.onTabChange
:(nextTabId, prevTabId) =>
- Called when the tab changes. Optional for uncontrolled tabs.
TabList
A wrapper component for Tab
s. This is just a ul
.
<TabList> <Tab ='inbox'>Inbox</Tab> <Tab ='outbox'>Outbox</Tab> <Tab ='sent'>Sent</Tab></TabList>
Tab
An individual tab. Has CSS class Tab
, and isSelected
or isDisabled
.
<Tab ='home'> <Icon ='house' /> Home</Tab>
Props
tabId
:any
- The ID of theTabPanel
to show when clicked.disabled
:bool
- Disallow clicking on this tab.tabindex
:number
- Allow this tab to be selected with tab. See MDNtabindex
reference.
TabPanel
Container for each tab's content. TabPanel
s are removed from the DOM when inactive.
TabPanel
can be used as children of a ReactCSSTransitionGroup
.
<TabPanel ='avatar'> <img = /> <span> username </span></TabPanel>
Props
tabId
:any
- The ID of theTab
that 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.
Props
tabId
:any
- The ID of theTab
that will reveal this panel.
Contribute
Questions, bug reports and pull requests welcome. See GitHub issues.
License
MIT