Skip to content

1.0.0
Compare
Choose a tag to compare
@danez danez released this 09 May 22:41
· 1567 commits to main since this release
v1.0.0
e9166bf

Breaking Changes

  • Peer dependency for react requires now ^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.
  • The value -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.
  • 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 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 */

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)

Internal

  • Refactor components to use native classes (#134) (LeoAJ)
  • Refactor to not use react-dom and remove dependency on it
  • Update dependencies
  • Rename main.js to index.js
  • Update travis versions
  • Use prettier (#169)
Assets 2
Loading