React responsive tabs

Live demo

Your feedback is highly appreciated!

Please, file an issue if something went wrong or let me know via Twitter @maslianok

Responsive

• Hide tabs under the 'Show more' option when they don't fit into the screen
• Transform tabs into the accordion when the wrapper width reaches the transformWidth value

Accessible

The component outputs HTML code that follows accessibility principles (aka WAI-ARIA) and uses ARIA attributes such as role, aria-selected, aria-controls, aria-labeledby etc.

Fast

We are using react-resize-detector. No timers. Just pure event-based element resize detection.

Installation

npm install react-responsive-tabs

Demo

Live demo

Local demo

# 1. clone the repository
git clone https://github.com/maslianok/react-responsive-tabs.git

# 2. Install react-responsive-tabs dependencies. You must do it because we use raw library code in the example
cd react-responsive-tabs
npm install

# 3. Install dependencies to run the example
cd examples
npm install

# 4. Finally run the example
npm start

Example

import React, { Component } from 'react';
import { render } from 'react-dom';
import Tabs from 'react-responsive-tabs';

// IMPORTANT you need to include the default styles
import 'react-responsive-tabs/styles.css';

const presidents = [
  { name: 'George Washington', biography: '...' },
  { name: 'Theodore Roosevelt', biography: '...' },
];

function getTabs() {
  return presidents.map((president, index) => ({
    title: president.name,
    getContent: () => president.biography,
    /* Optional parameters */
    key: index,
    tabClassName: 'tab',
    panelClassName: 'panel',
  }));
}

const App = () => <Tabs items={getTabs()} />;

render(<App />, document.getElementById('root'));

API

All entities listed below should be used as props to the Tabs component.

| Prop | Type | Description | Default | | ---------------- | ------------- | ---------------------------------------------------------------------------- | --------- | | items | Array | Tabs data | [] | | beforeChange | Function | Fires right before a tab changes. Return false to prevent the tab change | undefined | | onChange | Function | onChange callback | undefined | | selectedTabKey | Number/String | Selected tab | undefined | | showMore | Bool | Whether to show Show more or not | true | | showMoreLabel | String/Node | Show more tab name | ... | | transform | Bool | Transform to accordion when the wrapper width is less than transformWidth. | true | | transformWidth | Number | Transform width. | 800 | | unmountOnExit | Bool | Whether to unmount inactive tabs from DOM tree or not | true | | tabsWrapperClass | String | Wrapper class | undefined | | tabClassName | String | Tab class | undefined | | panelClassName | String | Tab panel class | undefined | | allowRemove | Bool | Allows tabs removal. | false | | removeActiveOnly | Bool | Only active tab has removal option | false | | showInkBar | Bool | Add MaterialUI InkBar effect | false | | uid | any | An optional external id. The component rerenders when it changes | undefined |

License

MIT