Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

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

Topics

Resources

Packages

No packages published