Build tab functionalities for complicated layouts. An advanced alternative for react-tabs.
Switch branches/tags
Nothing to show
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.
dist
src
storybook
.babelrc
.editorconfig
.gitignore
.npmignore
.travis.yml
README.md
package.json
webpack.config.js

README.md

React Tabs Manager npm version Build Status

Build tab functionalities for complicated layouts. An advanced alternative for react-tabs.

View demo / View examples

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.

<!-- Script tags for React and other libraries -->
<script src="https://unpkg.com/@srph/react-tabs-manager/dist/react-tabs-manager.min.js"></script>

This library is exposed as ReactTabsManager (e.g., ReactTabsManager, ReactTabsManager.TabView, ReactTabsManager.TabItem).

Usage

View examples.

import React from 'react';
import Tabs, {TabView, TabItem} from '@srph/react-tabs-manager';

class App extends React.Component {
  render() {
    return (
      <Tabs>
        <div className="app">
          <div className="panel">
            <h4 className="title">Subtasks</h4>
            <div className="nav">
              <TabItem index={0}>All</TabItem>
              <TabItem index={1}>Other</TabItem>
            </div>
          </div>

          <div className="content">
            <TabView index={0}>
              Baz!! 
            </TabView>

            <TabView index={1}>
              Bar!!
            </TabView>
          </div>
        </div>
      </Tabs>
    );
  }
}

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, or build it yourself locally:

npm install
npm run start

Bundling package

npm run bundle

Publish storybook

npm run storybook:publish