React-responsive-tabs-2 NPM

#React responsive tabs

Your feedback is highly appreciated!

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

Breaking change in 0.7.x

In this version library renders only active tab panel. To make it possible I've had to change item object structure.

Before:

{
  title: 'Title',
  content: 'Content',
}

After:

{
  title: 'Title',
  getContent: () => 'Content',
}

Responsive

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

Responsive tabs

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.

Accessible tabs

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 => ({
    key: index, // Optional. Equals to tab index if this property is omitted
    tabClassName: 'tab', // Optional
    panelClassName: 'panel', // Optional
    title: president.name,
    getContent: () => president.biography,
  }));
}

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

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