https://github.com/srph/react-tabs-manager
Build tab functionalities for complicated layouts. An advanced alternative for react-tabs.
https://github.com/srph/react-tabs-manager
library react tabs
Last synced: about 1 month ago
JSON representation
Build tab functionalities for complicated layouts. An advanced alternative for react-tabs.
- Host: GitHub
- URL: https://github.com/srph/react-tabs-manager
- Owner: srph
- Created: 2017-08-06T11:21:58.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-19T02:55:37.000Z (over 8 years ago)
- Last Synced: 2025-02-27T23:54:35.585Z (over 1 year ago)
- Topics: library, react, tabs
- Language: JavaScript
- Homepage: http://usher-diana-72251.netlify.com/
- Size: 75.2 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Tabs Manager [](https://npmjs.com/packages/@srph/react-tabs-manager) [](https://travis-ci.org/srph/react-tabs-manager?branch=master)
Build tab functionalities for complicated layouts. An advanced alternative for react-tabs.
[View demo](http://usher-diana-72251.netlify.com) / [View examples](storybook/tabs-manager.js)
## Why?
react-tabs works very well, but there are projects where the layout is slightly different from your usual tabs. Usual tabs use the following layout:
But this isn't intuitive when you have layout like the following:
### How It Works
This library takes advantage of context to pass down data to the navigation and view. react-tabs uses clones the element (via `React.cloneElement`), and passes down its props directly.
## Installation
```
npm i @srph/react-tabs-manager
```
### Script tags
If you're not using a bundler like Browserify or Webpack, simply add the script tag after your React script tag.
```html
```
This library is exposed as `ReactTabsManager` (e.g., `ReactTabsManager`, `ReactTabsManager.TabView`, `ReactTabsManager.TabItem`).
## Usage
View [examples](storybook/tabs-manager.js).
```js
import React from 'react';
import Tabs, {TabView, TabItem} from '@srph/react-tabs-manager';
class App extends React.Component {
render() {
return (
Subtasks
All
Other
Baz!!
Bar!!
);
}
}
export default App;
```
## API Documentation
Here's a list of props you may use to customize the component for your use-case:
### Tabs
| Prop | Type | Description |
| ----- | ---- | ----------- |
| activeClassName | `function` | The classname to pass to the active `TabItem`. Defaults to `active`. |
> **NOTE**: `Tabs` render all of the children you provide. It doesn't wrap it with a `div`. If you're using `React <= v15`, you will have to wrap the children you pass with div.
### TabItem
All other props are passed down to the `a` root element as usual.
| Prop | Type | Description |
| ----- | ---- | ----------- |
| index | `number` (required) | The number to be set as active when clicked. |
> **NOTE**: `TabItem` ignores `href` and `role`, hard codes the values `#` and `button` respectively.
### TabView
All other props are passed down to the `div` root element as usual.
| Prop | Type | Description |
| ----- | ---- | ----------- |
| index | `number` (required) | The number to identify if tab is active |
## Setup
You can check the [demo](http://usher-diana-72251.netlify.com), or build it yourself locally:
```bash
npm install
npm run start
```
### Bundling package
```
npm run bundle
```
### Publish storybook
```
npm run storybook:publish
```