Releases: reactjs/react-tabs
Releases · reactjs/react-tabs
v3.0.0
v2.3.0
v2.2.2
- chore(deps): Update dependencies (0ffa609)
- chore(deps): Update dependencies (647e8d2)
- chore(prettier): Format codebase (be1e19c)
- chore(prettier): Format codebase (9be02f2)
- chore(release): 2.2.2 (f12e3b5)
- chore(tests): Update tests to use better matchers (6ce7490)
- chore(website): Update webpack config (e252aae)
- Add analythics (9d95a1d)
- Add codesponsor (7839dec)
- Add note about google analytics (8c6610c)
- fix linter (d5b6187)
- fix scripts build:umd (#235) (b177020), closes #235
- fix small mistake (7e9dbaf), closes /github.com/reactjs/react-tabs/blob/master/src/helpers/elementTypes.js#L2
- Remove codesplitting (e63b05b)
- remove trailing comma (#239) (018855f), closes #239
- To avoid the babel "'this' is not allowed before super()" error (#238) (4e5b482), closes #238
- Update README.md (#236) (e93eb04), closes #236
- Use auto export (5c69fa2)
- fix(publish): Added src folder to package (#232) (a4cc6d0), closes #232
- docs(README.md): Add Custom Components documentation (44c5dd1)
- docs(README.md): Add values for tabsRole (64f9b38)
- docs(README.mnd): Wrap Tabs between <> (3905d6d)
- docs(README): Fix link to website (5a5c831)
v2.2.1
v2.2.0
v2.1.1
v2.1.0
v2.0.0
1.1.0
New Features
- Add nested TabList and TabPanel support (#184) (Emmet McPoland)
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>
1.0.0
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 />
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 usingselectedIndex
before to set the initial displayed tab usedefaultIndex
now.- 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 */
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
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.
Documentation
- Rewrite README.md
- Change ReactDOM.render to render (#163) (Gerard Banasig)
- Add NPM package badge (#164) (Hum4n01d)