Skip to content
An accessible React tabs component
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/src
src
tools
.editorconfig
.eslintrc
.gitignore
.travis.yml
CONTRIBUTING.md
LICENSE
README.md
nwb.config.js
package.json

README.md

React Accessible Tabs

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

npm version Build Status

Demo

See it in action.

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 {}
        }

Copyright (c) 2017 Matt Stow
Licensed under the MIT license (see LICENSE for details)

You can’t perform that action at this time.