All Versions
34
Latest Version
Avg Release Cycle
68 days
Latest Release
1427 days ago
Changelog History
Page 2
Changelog History
Page 2
-
v2.0.0 Changes
September 05, 2017๐ Bug Fixes
๐ Features
- tabs: Allow for higher order components. All HOC which use hoist-non-react-statics are supported out of the box (#196) (1969e65)
- tabs: Always call onSelected callback even if tab is active. (#195) (bc1910a)
๐ฅ BREAKING CHANGES
- tabs: The
onSelect
callback will now also be called when clicking on the currently active tab.
-
v1.1.0 Changes
June 13, 2017๐ 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>
-
v1.0.0 Changes
May 10, 2017๐ 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 */
-
v0.8.3 Changes
April 19, 2017๐ Bug Fixes
- ๐ Fix deprecation warnings with react 15.5
-
v0.8.2 Changes
October 19, 2016๐ Bug Fixes
- ๐ Fix UMD build (#143)
-
v0.8.0 Changes
September 14, 2016๐ Features
- ๐ Allow other components inside TabList (#123)
-
v0.7.0 Changes
July 05, 2016 -
v0.6.2 Changes
June 24, 2016 -
v0.6.1 Changes
June 23, 2016