westyby/react-responsive-tabs

React responsive tabs http://maslianok.github.io/react-responsive-tabs/

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',
    tabSelectedClassName: 'tab--selected',
    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	Item[]
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
tabSelectedClassName	String	Tab class for selected item	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

Item

Prop	Type	Description
title	String	Tab title
getContent	Function	A function that returns data that will be rendered when tab become active
content	String	Use this prop insted of getContent. This is a sync version of getContent. The data will be always rendered in a hidden div. Sometimes it may be useful for SEO
key	Number	A uniq tab id
tabClassName	String	Tab class name
tabSelectedClassName	String	Tab class name for selected item
panelClassName	String	Panel class name

License

MIT