Releases: reactjs/react-tabs
Releases · reactjs/react-tabs
1.0.0
Breaking Changes
- Peer dependency for react requires now
^0.14.9or^15.3.0 activeTabClassNamemoved from<TabList />to<Tabs />and renamed toselectedTabClassNamedisabledTabClassNamemoved from<TabList />to<Tabs />classNameproperty 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>selectedIndexnow enables controlled mode, which disables internal management of the active tab. If you were usingselectedIndexbefore to set the initial displayed tab usedefaultIndexnow.- The value
-1forselectedIndexanddefaultIndexdo not activate the first tab anymore, but instead display no tab panel at all. Use-1if 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: noneanymore. 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 */New 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
selectedTabPanelClassNameon<Tabs />to change the class name of the current selected tab panel. - New prop
defaultIndexon<Tabs />to allow setting the initial displayed tab. - New prop
forceRenderon<TabPanel />to allow force rendering of individual tab panels. - New prop
selectedClassNameon<TabPanel />to allow changing selected class name of individual tab panels. - New prop
selectedClassNameon<Tab />to allow changing selected class name of individual tabs. - New prop
disabledClassNameon<Tab />to allow changing disabled class name of individual tabs. - Property
classNameon 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.
Documentation
- Rewrite README.md
- Change ReactDOM.render to render (#163) (Gerard Banasig)
- Add NPM package badge (#164) (Hum4n01d)
