tabs

Responsive tabs with react.js

May 04, 2018
Responsive tabs with react.js

React responsive tabs

Responsive tabs with react.js

View demo Download Source

(adsbygoogle = window.adsbygoogle []).push({});

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'));

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.

showMoreLabel

(String) Text to show on the Show more tab. Default: ...

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

tabsWrapperClass

(String) Wrapper class

tabClassName

(String) Tab class

panelClassName

(String) Tab panel class

allowRemove

(Bool) Allows tabs removal. Default: false

removeActiveOnly

(Bool) Only active tab has removal option

showInkBar

(Bool) Add MaterialUI InkBar effect

GitHub

Recommended