An accessible and easy tab component for ReactJS.
MIT License
Bot releases are visible (Hide)
Published by danez over 6 years ago
Published by danez about 7 years ago
Published by danez over 7 years ago
This allows random elements as children for the <Tabs />
component, for example:
<Tabs>
<div id="tabs-nav-wrapper">
<button>Left</button>
<div className="tabs-container">
<TabList>{tabs}</TabList>
</div>
<button>Right</button>
</div>
<div className="tab-panels">
{tabPanels}
</div>
</Tabs>
Published by danez over 7 years ago
^0.14.9
or ^15.3.0
activeTabClassName
moved from <TabList />
to <Tabs />
and renamed to selectedTabClassName
disabledTabClassName
moved from <TabList />
to <Tabs />
className
property on all components now overwrites the default classes instead of adding a second class name// 0.8
<Tabs className="tabs">
<TabList className="list">
<Tab className="tab" />
</TabList>
<TabPanel className="panel" />
</Tabs>
// Same effect in 1.0
<Tabs className={['tabs', 'react-tabs']}>
<TabList className={['list', 'react-tabs__tab-list']}>
<Tab className={['tab', 'react-tabs__tab']} />
</TabList>
<TabPanel className={['panel', 'react-tabs__tab-panel']} />
</Tabs>
selectedIndex
now enables controlled mode, which disables internal management of the active tab. If you were using selectedIndex
before to set the initial displayed tab use defaultIndex
now.-1
for selectedIndex
and defaultIndex
do not activate the first tab anymore, but instead display no tab panel at all. Use -1
if you want to display only the tabs but have non of them being selected. If you want to have the first tab selected us 0
.// 0.8
import ReactTabs from 'react-tabs';
<ReactTabs.Tabs></ReactTabs.Tabs>
// in 1.0
import { Tabs } from 'react-tabs';
<Tabs></Tabs>
ReactTabs
-> react-tabs
, ReactTabs__TabPanel--selected
-> react-tabs__tab-panel--selected
<TabPanel />
components do not set the inline style display: none
anymore. Hidding and showing a tab panel is now completely done via css and classnames. If you have your own style for the tabs make sure to add the following rules:.react-tabs__tab-panel {
display: none;
}
.react-tabs__tab-panel--selected {
display: block;
}
/* If you use custom class names obviously use the class names you set for the tab panels and selected tab panels */
import { resetIdCounter } from 'react-tabs';
resetIdCounter();
<TabList>
(#139) (Alexander Wallin)<TabList />
, <TabPanel />
and other arbitrary components. The <TabPanel />
components are matched to the <Tab />
components in order from top to bottom.<Tabs>
<TabPanel />
<div />
<TabList>
<Tab />
<Tab />
</TabList>
<span />
<TabPanel />
</Tabs>
selectedTabPanelClassName
on <Tabs />
to change the class name of the current selected tab panel.defaultIndex
on <Tabs />
to allow setting the initial displayed tab.forceRender
on <TabPanel />
to allow force rendering of individual tab panels.selectedClassName
on <TabPanel />
to allow changing selected class name of individual tab panels.selectedClassName
on <Tab />
to allow changing selected class name of individual tabs.disabledClassName
on <Tab />
to allow changing disabled class name of individual tabs.className
on all components can now officially take an array as argument.if(process.env.NODE_ENV === 'production') Component.propTypes = { ... }
in order to allow removing of proptypes in production builds.Published by danez over 7 years ago
Published by danez about 8 years ago
Published by danez over 8 years ago
Published by danez over 8 years ago
Published by danez over 8 years ago
Published by danez over 8 years ago
Published by danez over 8 years ago
Published by danez over 8 years ago