react-responsive-tabs

#React responsive tabs

Responsive

• Move tabs to 'Show more' list on medium screen size
• Transform tabs to accordion on small screen size

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

git clone https://github.com/maslianok/react-responsive-tabs.git
cd react-responsive-tabs/example
npm install && npm start

Example

Example 1

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

class App extends Component {
  render() {
    return (
      <div>
        <Tabs>
          <Tab key="1">George Washington</Tab>
          <TabPanel key="1">...</TabPanel>

          <Tab key="2">Theodore Roosevelt</Tab>
          <TabPanel key="2">...</TabPanel>
        </Tabs>
      </div>
    );
  }
}

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

Example 2

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

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

class App extends Component {
  render() {
    return (
      <div>
        <Tabs>
          {presidents.reduce((result, president, i) => {
            result.push(<Tab key={i}>{president.name}</Tab>);
            result.push(<TabPanel key={i}>{president.biography}</TabPanel>);
            return result;
          }, [])}
        </Tabs>
      </div>
    );
  }
}

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

API

selectedTabKey

(Number|String) Tab with this key will be selected by default.

showMore

(Bool) Show Show more list. Default: true.

transform

(Bool) Transform to accordion if element width less than transformWidth. Default: true.

transformWidth

(Number) Transform to accordion if wrapper width less than this value. Default: 800

License

MIT