react-tabs v1.0.0 Release Notes
Release Date: 2017-05-10 // almost 7 years ago-
🔋 Features
- 🆕 New static method to reset the id counter for isomorphic apps. Call this before rendering your application on the server. (#129) (Neehar Venugopal)
import { resetIdCounter } from 'react-tabs'; resetIdCounter();
- 👍 Allows arbitrary components anywhere inside
<TabList>
(#139) (Alexander Wallin) - 👍 Allow random order of
<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>
- 👀 Introduce controlled and uncontrolled mode. This two modes allow either to control the tabs from your component from the outside or leave the control to the tabs within react-tabs components. (see README.md for more information)
- 🆕 New prop
selectedTabPanelClassName
on<Tabs />
to change the class name of the current selected tab panel. - 🆕 New prop
defaultIndex
on<Tabs />
to allow setting the initial displayed tab. - 🆕 New prop
forceRender
on<TabPanel />
to allow force rendering of individual tab panels. - 🆕 New prop
selectedClassName
on<TabPanel />
to allow changing selected class name of individual tab panels. - 🆕 New prop
selectedClassName
on<Tab />
to allow changing selected class name of individual tabs. - 🆕 New prop
disabledClassName
on<Tab />
to allow changing disabled class name of individual tabs. - Property
className
on all components can now officially take an array as argument. - 🏗 PropTypes are now wrapped in
if(process.env.NODE_ENV === 'production') Component.propTypes = { ... }
in order to allow removing of proptypes in production builds.
💥 BREAKING CHANGES
- Peer dependency for react requires now
^0.14.9
or^15.3.0
- 🚚
activeTabClassName
moved from<TabList />
to<Tabs />
and renamed toselectedTabClassName
- 🚚
disabledTabClassName
moved from<TabList />
to<Tabs />
- 0️⃣
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>
- 0️⃣
selectedIndex
now enables controlled mode, which disables internal management of the active tab. If you were usingselectedIndex
before to set the initial displayed tab usedefaultIndex
now. - 0️⃣ The value
-1
forselectedIndex
anddefaultIndex
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 us0
. - 👌 Support for bower package manager was removed.
- ✂ Removed deprecated default export of tabs:
// 0.8 import ReactTabs from 'react-tabs'; <ReactTabs.Tabs></ReactTabs.Tabs> // in 1.0 import { Tabs } from 'react-tabs'; <Tabs></Tabs>
- ✂ Removed jsstylesheet dependency and removed default style from javascript. If you want to use the default styles you can use one of the supported methods (see README.md)
- The default class names were all lowercased and separated by hyphen, but still follow BEM methodology. E.g.
ReactTabs
->react-tabs
,ReactTabs__TabPanel--selected
->react-tabs__tab-panel--selected
- 💅
<TabPanel />
components do not set the inline styledisplay: 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 */