4.3.0 (2023-04-08)

Features

• Add typescript typings to repo (0cb15ff)
• typescript: Add new type for custom tabs function components (#469) (51b30bb)

3.2.0 (2021-02-06)

Features

• Add new environment prop to handle tabs in iframes (#365) (d6fd355)
• New prop to disable up/down arrow keys for changing tabs (#368) (40ea746)

3.1.2 (2020-12-13)

Bug Fixes

• deps: add support for React 17 (cb8297d)

3.1.1 (2020-05-23)

Bug Fixes

• Replace classnames with clsx (a37ca85)

Features

• Right to left support (#311) (f789bbf)

Bug Fixes

• tabs: Handle nodes with parentNode set to undefined instead of null correctly (0259616)

Bug Fixes

• react: Fix lifecycle for react 16.3 or newer (738d9d8)
• tabs: Handle nodes with parentNode set to undefined instead of null correctly (83f8780)

BREAKING CHANGES

• react: Minimum compatible version of react is now 16.3

Bug Fixes

• Fix flickering on iphone when touching tabs (5d608aa), closes #186
• style: Correctly fix flash on iOS (25cfa16)

Features

• Add support for home and end key on tab list (#246) (8f5cd84)

• 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)

Bug Fixes

• tabs: click wrapper container bubbles up to document causing getAttribute() to throw (#221) (96b163b)

Features

• tabs: verify click tabNode using *[role=tab] (#220) (5bd6bfe)

Bug Fixes

• style: Fix less and sass to correctly generate tab--disabled class (b95891e)

Bug Fixes

• tabs: Correctly handle children of type string (#211) (6fd4002)
• umd: Fix the umd builds by switching to rollup (#212) (46c1a60)

Features

• dependencies: Support react 16 (94447e9)
• tablist: Enable overwriting tabIndex on <Tab> and allow tabbing among <Tab>s by using tab key and enter/space. (00a8401)
• tabs: Publish also as ES2015 modules (41415ab)
• tabs: Add domRef prop for getting the ref to the tabs DOM node (#213) (e989491)

Bug Fixes

• tabs: Fix activeElement check #193 (#194) (722d52f)

Features

• tabs: Allow for higher order components (#196) (1969e65)
• tabs: Always callback setSelected. (#195) (bc1910a)

BREAKING CHANGES

• tabs: The onSelect callback will now also be called when clicking on the currently active tab.

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>

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)

• Fix deprecation warnings with react 15.5

• Allow other components inside TabList (#123)

• Fix bower bundling (#111, #112)

• Feature/add custom active and disabled class (#108)
• Remove aria-expanded attribute (#71)
• Fix warning with react 15.2