react-web-tabs


Modular and accessible React tabs according to the WAI-ARIA Authoring Practices 1.1.

Demo

See the demo website for a live example.

Documentation

Read the docs for more comprehensive examples and API Reference.

Installation

> Note! This package depends on React ^16.3.0

Using npm:
``bash
npm install --save react-web-tabs
`
Using yarn:
`bash
yarn add react-web-tabs
`

Then with a module bundler like webpack you can import it like usual:

`js
// using ES6 modules
import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs';

// using ES6 Partial imports
import Tabs from 'react-web-tabs/lib/Tabs';
import Tab from 'react-web-tabs/lib/Tab';
import TabPanel from 'react-web-tabs/lib/TabPanel';
import TabList from 'react-web-tabs/lib/TabList';

// using CommonJS modules
var Tabs = require('react-web-tabs').Tabs;
var Tab = require('react-web-tabs').Tab;
var TabPanel = require('react-web-tabs').TabPanel;
var TabList = require('react-web-tabs').TabList;
`

The UMD build is also available on unpkg:

`html

`

Usage

`js
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs';


class App extends Component {
render() {
return (
defaultTab="one"
onChange={(tabId) => { console.log(tabId) }}
>

Tab 1
Tab 2
Tab 3




Tab 1 content

Tab 2 content

Tab 3 content

);
}
}

render(, document.getElementById('app'));
`

If you need to make it more interesting and mix in other elements you can do that to:

`js
import React, { Component } from 'react';
import { render } from 'react-dom';
import { TabProvider, Tab, TabPanel, TabList } from 'react-web-tabs';


class App extends Component {
render() {
return (



Tab 1
•
Tab 2
•
Tab 3

Tab 1 content

Tab 2 content

Tab 3 content

);
}
}

render(, document.getElementById('app'));
`

And of course every component supports adding additional props like custom className's or data attributes.

Styles

Some basic styles are provided as well but they are optional as the tabs are fully functional without styling and I do encourage you to create your own. Both minified and unminified versions are available in the /dist folder.

With webpack:
`js
import 'react-web-tabs/dist/react-web-tabs.css';
`

Keyboard support

The following keys can be used to navigate between tabs when in focus, according to the WAI-ARIA Authoring Practices 1.1.

* ← Navigate to previous tab
* → Navigate to next tab
* HOME Navigate to first tab
* END Navigate to last tab

When the tabs are vertical:

* ↑ Navigate to previous tab
* ↓ Navigate to next tab
* HOME Navigate to first tab
* END Navigate to last tab

According to the WAI-ARIA Practices 1.1 only the active tab should receive focus upon entering and leaving the tab list. Some people find this behavior confusing so to make all tabs focusable you can override this behavior by adding the focusable flag to each component. E.g.

`js

React web tabs
``

Issues

If you find a bug, please file an issue on the issue tracker on GitHub.

Licence

MIT