react-accessible-tabs

0.3.3 • Public • Published

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)

Package Sidebar

Install

npm i react-accessible-tabs

Homepage

mattstow.com

Weekly Downloads

3

Version

0.3.3

License

MIT

Last publish

Collaborators

  • stowball