npm install react-responsive-tabs-2#React responsive tabs
javascript
{
title: 'Title',
content: 'Content',
}
`
After:
`javascript
{
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
`javascript
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 = () => ;
render( , document.getElementById('root'));
`
API
#### items
(Array) Tabs data
#### onChange(key)
(Function) onChange callback
#### 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`.