React-tabs-navigation NPM

react-tabs-navigation

This react component enables navigating through tabs in your web app. It is composed of three different parts:

Banner
This content does not change with tabs and sits on top of the tabs bar. When the user scrolls past the banner the tabs bar stick on top of the page
Tabs
The tabs of the element. They are horizontal. You can define their styles, hover styles and selected styles.
The selected tab in underlined, this animates to the newly selected tab when a new tab is selected.
Content
The content that changes when the user changes the tab.

Installing

$ npm install react-tabs-navigation

Live demo

Here: http://pepjo.github.io/react-tabs-navigation/

Props

This component accept the following props:

banner object
content over the tab bar
- children func|node
  a node or a function that returns a node (recommended)
color string
main color (can be overridden on lineStyles and tabStyles)
fixOffset number
The tabs bar fixes on the sreen when you scroll pass to it. If you want it to fix below the upper limit of the document set here the offset If you want it to not fix set the offset to at least -(the height of the bar)
lineStyle object
Styles of the underline. Use backgroundColor to change the color and height to change the width (default 3px) of the line. (Accepts Radium properties like :hover)
onTabChange func
Function that gets executed when a tab changes, first argument is the index of the tab. If you return false the tab will not change. Of course, you will still be able to change it changing the selectedTab prop.
selected string|number
The index or the keyName of the tab selected initially
selectedTabStyle object
The style of the tab when it is selected. (Accepts Radium properties like :hover)
tabs array -required-
An array of objects, one for each tab
- children func|node
  a node or a function that returns a node (recommended)
- displayName string
  the name displayed on the tab
tabsBarClassName string
className of the tabs bar element
tabsBarStyle object
The style of the tabs bar
tabsClassName string
className of each tab. When they are selected they also have the class is-selected
tabsStyle object
The style of the tab. (Accepts Radium properties like :hover)

Public Methods

changeSelectedTab(indexTab) to change the selected tab

Simple example

One of the simplest examples one could use

import Tabs from 'react-tabs-navigation'

<Tabs
  banner={{
    children: 'Content over the tabs!'
  }}
  tabs={[
    {
      children: () => (
        <div>
          This is the first tab content
        </div>
      ),
      displayName: 'Tab 1'
    },
    {
      children: () => (
        <div>
          This is the second tab content
        </div>
      ),
      displayName: 'Tab 2'
    }
  ]}
/>

Full example

A more complete example using more functionalities

import Tabs from 'react-tabs-navigation'

<Tabs
  banner={{
    children: 'Content over the tabs!'
  }}
  tabs={[
    {
      children: () => (
        <div>
          This is the first tab content
        </div>
      ),
      displayName: 'Tab 1'
    },
    {
      children: () => (
        <div>
          This is the second tab content
        </div>
      ),
      displayName: 'Tab 2'
    }
  ]}
/>

To do list

Use travis
Write some tests
Optional animation when changing between tabs
Keyboard navigation
Optional scroll behavior (see: this issue)

Contribute

Getting Started

Submit a ticket for your issue on GitHub in Repository issues

Making Changes

We are following Gitflow workflow.

Create feature branch from master branch called feature/{ISSUE} where {ISSUE} is GitHub issue identifier e.g. feature/123
Make commits of logical units
Don't forget about tests! :)
Stick to code standards
Don't forget to build $ npm run build !!

Improving the example

In order to build the example source code you can use gulp example-watchify or gulp example-browserify depending on the desired behaviour.

Submiting Changes

Push your branch to base repository
Submit a pull request to master branch
Wait for someone to review your changes and merge it
If your pull request is tagged as To correct you should fix your code as soon as possible and go back to point 3.

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.