React Accessible Tabs

An accessible React tabs component, ported from my vanilla JS plugin.

View demo Download Source

Usage

Installation

npm install react-accessible-tabs --save

In React

import Tabs from 'react-accessible-tabs';

class App extends React.Component {
    render () {
        const tabContent = [
            {
                label: 'Tab 1',
                content: <CustomComponent text="Tab 1 content" />
            },
            {
                label: 'Tab 2',
                content: <Parent><Child text="Tab 2 content" /></Parent>
            },
            {
                label: 'Tab 3',
                content: '<p>Tab 3 content</p>'
            },
            {
                label: 'Tab 4',
                content: [
                  <Header />,
                  '<p>Tab 4 content</p>'
                  <Footer />
                ]
            }
        ];
        const initialSelectedIndex = 1;

        return (
            <Tabs data={tabContent} initialSelectedIndex={initialSelectedIndex} />
        );
    }
}
  • data[x].label accepts a string
  • data[x].content accepts React elements, a string or an array of elements and strings

Styling

The styling is up to you and uses BEM selectors:

.tabs {}

    .tabs__tab-list {}
        .tabs__tab-list-item {}
            .tabs__trigger {
                &.is-selected {}
            }

    .tabs__panels {}
        .tabs__panel {
            &.is-hidden {}
        }

GitHub