https://github.com/rhys-vdw/react-context-tabs
Flexible tabs for React
https://github.com/rhys-vdw/react-context-tabs
context react tab tabs
Last synced: about 1 year ago
JSON representation
Flexible tabs for React
- Host: GitHub
- URL: https://github.com/rhys-vdw/react-context-tabs
- Owner: rhys-vdw
- Created: 2016-08-18T08:19:09.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-04-01T05:23:23.000Z (about 7 years ago)
- Last Synced: 2025-03-18T16:56:11.862Z (about 1 year ago)
- Topics: context, react, tab, tabs
- Language: TypeScript
- Homepage:
- Size: 71.3 KB
- Stars: 30
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# React context tabs
[](https://github.com/RichardLitt/standard-readme)
A flexible and unopinionated tab interface for React. Tabs and panes to be provided in any order or nesting. Inactive panels can be either unmounted or just hidden from view. Includes an optional minimal base stylesheet, but leaves aesthetics up to you.
## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [Basic example](#basic-example)
- [Controlled tabs](#controlled-tabs)
- [Nesting](#nesting)
- [Styles](#styles)
- [API](#api)
- [`Tabs`](#tabs)
- [`TabList`](#tablist)
- [`Tab`](#tab)
- [`TabPanel`](#tabpanel)
- [`PersistentTabPanel`](#persistenttabpanel)
- [Contribute](#contribute)
- [License](#license)
## Install
```console
npm install react-context-tabs --save
```
## Usage
### Basic example
Straight forward tabs!
```jsx
import React from 'react'
import { Tab, TabList, Tabs, TabPanel } from 'react-context-tabs'
export default function TabExample() {
return (
React context tabs
What is it?
I have a problem
Flexible tabs for React
A fine React library
Problem? Try our
issues page.
)
}
```
### Controlled tabs
`Tabs` can be either "[controlled](https://facebook.github.io/react/docs/forms.html#controlled-components)" or "[uncontrolled](https://facebook.github.io/react/docs/forms.html#uncontrolled-components)". Controlled tabs require a `selectedTabId` property.
```jsx
import React, { Component } from 'react'
import { Tab, TabList, Tabs, TabPanel } from 'react-context-tabs'
function getHash() {
return window.location.hash.slice(1)
}
class HashControlledTabs extends Component {
constructor(props) {
super(props)
this.state = { selectedTabId: getHash() }
this.handleHashChange = this.handleHashChange.bind(this)
this.handleTabChange = this.handleTabChange.bind(this)
}
componentDidMount() {
window.onhashchange = this.handleHashChange
}
componentWillUnmount() {
window.onhashchange = null
}
handleHashChange(event) {
this.setState({ selectedTabId: getHash() })
}
handleTabChange(nextTab, prevTab) {
window.location.hash = nextTab
}
render() {
const { selectedTabId } = this.state
return (
Happy
Sad
:)
:(
)
}
}
```
### Nesting
Thanks to React's [context](https://facebook.github.io/react/docs/context.html) feature, children can be re-ordered or nested as you please.
```jsx
import React from 'react'
import { Tab, TabList, Tabs, TabPanel } from 'react-context-tabs'
function CharacterInformation({ warrior, wizard }) {
return (
{/* Tabception */}
Stats
Spells
{/* Children can be any old component */}
Select your character!
{/* Tabs come after panels */}
Warrior
Wizard
)
}
```
## Styles
A base style sheet is included in the build at [`/lib/styles/base.css`](src/styles/base.css). This just sets appropriate cursor and removes default list styles (for the `TabList`). You'll still need to write your own CSS to make the tabs look how you want.
Each component has a default class name that is the same as its component name. eg:
```html
- First
- Second
First content
```
_Note that `PersistentTabPanel` and `TabPanel` both have the same class: `TabPanel`._
## API
### `Tabs`
Parent container to which child components are passed. `Tabs` can be either "[controlled](https://facebook.github.io/react/docs/forms.html#controlled-components)" or "[uncontrolled](https://facebook.github.io/react/docs/forms.html#uncontrolled-components)". Supply either `defaultTabId` for uncontrolled or `selectedTabId` for controlled.
```js
import { Tabs } from 'react-context-tabs'
import Tabs from 'react-context-tabs/Tabs'
```
```jsx
// controlled
this.setState({ selectedTadId: nextTabId })
}
>
{/* ... */}
// uncontrolled
{/* ... */}
```
#### Props
- `defaultTabId`: `any` - The `tabId` of the initially selected tab when uncontrolled.
- `selectedTabId`: `any` - The `tabId` of the currently selected tab when controlled.
- `onTabChange`: `(nextTabId, prevTabId) =>` - Called when the tab changes. Optional for uncontrolled tabs.
### `TabList`
A wrapper component for `Tab`s. This is just a `ul`.
```js
import { TabList } from 'react-context-tabs'
import TabList from 'react-context-tabs/TabList'
```
```jsx
Inbox
Outbox
Sent
```
### `Tab`
An individual tab. Has CSS class `Tab`, and `isSelected` or `isDisabled`.
```js
import { Tab } from 'react-context-tabs'
import Tab from 'react-context-tabs/Tab'
```
```jsx
Home
```
#### Props
- `tabId`: `any` - The ID of the `TabPanel` to show when clicked.
- `disabled`: `bool` - Disallow clicking on this tab.
- `tabindex`: `number` - Allow this tab to be selected with tab. See [MDN `tabindex` reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).
### `TabPanel`
Container for each tab's content. `TabPanel`s are removed from the DOM when inactive.
`TabPanel` can be used as children of a [`ReactCSSTransitionGroup`](https://facebook.github.io/react/docs/animation.html#high-level-api-reactcsstransitiongroup).
```js
import { TabPanel } from 'react-context-tabs'
import TabPanel from 'react-context-tabs/TabPanel'
```
```jsx
{ user.name }
```
#### Props
- `tabId`: `any` - The ID of the `Tab` that will reveal this panel.
### `PersistentTabPanel`
An alternative to `TabPanel`. `PersistentTabPanel` is *not* removed from the DOM when inactive. Instead it is set to `display: none`. Children will not be rendered until the tab is first revealed.
These panels are useful for tabs that are computationally expensive to render, or need to persist internal state while deselected.
```js
import { PersistentTabPanel } from 'react-context-tabs'
import PersistentTabPanel from 'react-context-tabs/PersistentTabPanel'
```
#### Props
- `tabId`: `any` - The ID of the `Tab` that will reveal this panel.
## Contribute
Questions, bug reports and pull requests welcome. See [GitHub issues](https://github.com/usabilityhub/react-context-tabs/issues).
## License
MIT