React-tabs-navigation is a nice react component that enables navigation through tabs in your web app.

Last update: Aug 8, 2020

react-tabs-navigation

Build Status Code Climate js-standard-style

js-standard-style

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

  1. 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

  2. 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.

  3. 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

Contribute

Getting Started

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

  1. Push your branch to base repository
  2. Submit a pull request to master branch
  3. Wait for someone to review your changes and merge it
  4. 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

Copyright (c) 2015, Pep Rodeja

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.

GitHub

https://github.com/pepjo/react-tabs-navigation/
Comments
  • 1. Accessibility & Dynamically switching selected tabs

    Hi @pepjo! Thanks for the library! I was wondering if there were any plans in the short-term to make it a11y friendly and add keyboard navigation?

    Additionally, I noticed that we can pass in the selected tab index. Does it allow us to also change the tabs dynamically - i.e. an action on tab can switch the tab to the other one?

    Reviewed by oyeanuj at 2015-12-22 01:25
  • 2. index.js (line 112) lineStyle is not in state

    I can't change the color of the line, I also see on line 112 of index.js reads lineStyle={this.state.lineStyle} but lineStyle is a prop.

    Is this a bug?

    Reviewed by conor909 at 2016-08-18 16:18
  • 3. How do you adjust the height of the tabs?

    I tried setting a class with a height to the Tabs component, but that didn't work. when I go into dev tools with chrome it seems that "nav" is what is being set, but changing that would affect my actual navbar.

    Reviewed by VicFrolov at 2017-07-10 16:40
  • 4. undefined is not an object (evaluating '_react.PropTypes.object')

    import Tabs from 'react-tabs-navigation';

    When I'm importing the Tabs from react-tabs-navigation the below error appears.

    undefined is not an object (evaluating '_react.PropTypes.object' ) ... ... ...

    My React version is as follows:

    "react": "16.0.0",
    "react-dom": "^16.2.0",
    "react-native": "0.50.4",
    "react-tabs-navigation": "^0.4.4",
    
    Reviewed by popstheman at 2017-12-26 16:12
  • 5. Be able to scroll pass the tab element

    Setting the tabs to not fix

    Current version

    You can hide the tabs by setting fixOffset to at least -(the height of the bar). You can even control

    Possible improvement

    An improvement could be made in order to address your use case. This is not something I have the time to code now but contributions are welcome :smile:

    Right now there are 2 behaviours: Fixed tabs and not fixed. This result in the situations 1, 2 and 4. If I have understood correctly you want a third behaviour that replaces "fixed" when the element is scrolled away.

    This new behaviour would be 3. Relative bottom.

    Probably it's not hard to implement, we just have to detect when the visible part of the component is the same as the tabs bar height. In that moment, all the content left on the screen would be underneath the tabs bar. Then, we just have to change the tabs bar style from "fixed" to "relative" and set bottom to 0. This will fix the bar to the bottom of the element and will scroll upwards with the component. This will also allow for a great and seamless transition.

    If you cannot do it, then maybe I'll do it on February, if I have time then.

    Current tab behaviours

    Reviewed by pepjo at 2016-01-25 09:26
Simple blacklist hook for react-navigation to toggle top/bottom tabs.

react-navigation-blacklist Simple blacklist hook for react-navigation to toggle top/bottom tabs. Installation Make sure you have installed react-navig

Nov 22, 2021
A React component used to render accessible and simple tabs

Faster React Tabs Faster React Tabs is a flexible and context-agnostic React component used to render accessible and simple tabs. You can play with th

May 30, 2022
An accessible React tabs component

React Accessible Tabs An accessible React tabs component, ported from my vanilla JS plugin. Demo See it in action. Usage Installation npm install reac

Dec 4, 2020
Declarative, modular and accessible React tabs component

react-web-tabs Modular and accessible React tabs according to the WAI-ARIA Authoring Practices 1.1. Demo See the demo website for a live example. Docu

Apr 29, 2022
React Tabs component.
React Tabs component.

rc-tabs React Tabs component. Screenshot Example http://localhost:8000/examples online example: https://tabs.react-component.now.sh/ install Feature K

Aug 8, 2022
React tabs with hooks

@bumaga/tabs Headless tabs component for React Features ?? super small, 381 B vs 3.5kB react-tabs ?? no styles, just logic. Style what you want, as yo

Jul 27, 2022
Draggable atom-like tabs for React
Draggable atom-like tabs for React

React draggable tabs The plugin is inspired by Atom and allows you to use these beautiful tabs in your React App Install just download the repo from n

Mar 27, 2022
React responsive tabs
 React responsive tabs

React responsive tabs Live demo Your feedback is highly appreciated! Please, file an issue if something went wrong or let me know via Twitter @maslian

May 12, 2022
💃 Make your react tab dance🕺
💃 Make your react tab dance🕺

A mobile support, draggable, editable and api based Tab for ReactJS. Support react >= v16.3 Note: Since v2, we don't support v15 and old styled-compon

Jul 18, 2022
Add collapsible headers to your tab-view components.
Add collapsible headers to your tab-view components.

React Native Head Tab View ?? ?? ?? v4.0.0-rc.13 has been released, I hope you can help me test and collect questions. In this version, there is a big

Aug 8, 2022
A fully accessible, extravagantly flexible, React-powered Tab Panel component

react-aria-tabpanel SEEKING CO-MAINTAINERS! Continued development of this project is going to require the work of one or more dedicated co-maintainers

Aug 7, 2022
Atom like draggable tab react component
Atom like draggable tab react component

React-draggable-tab Atom like draggable tab react component. Demo View Demo Installation npm install --save react-draggable-tab React v0.14 is support

Apr 27, 2022
React reusable tab component
React reusable tab component

react-re-super-tabs React reusable tab component Demo Installing yarn: yarn add react-re-super-tabs npm: npm install react-re-super-tabs --save Usage

May 7, 2022
A React component for rendering tabbed content.

A React component for rendering tabbed content.

Jan 10, 2022
An accessible and easy tab component for ReactJS.

react-tabs An accessible and easy tab component for ReactJS. https://reactcommunity.org/react-tabs/ Supports React 16.3.0 or newer react-tabs was test

Aug 8, 2022
🧲 Light, zero dependencies magnetic board component using HTML5 canvas
🧲 Light, zero dependencies magnetic board component using HTML5 canvas

React Magnetic Board Light, zero dependencies magnetic board component using HTML5 canvas ?? Demo Demos created with React DemoTab ?? Install npm inst

Feb 12, 2022
Headless, simple, and highly flexible tab-like primitives built with react hooks

react-headless-tabs Headless and highly flexible tab-like primitives built with react hooks ?? Check out the documentation and interactive examples! F

Jul 28, 2022
React tabindex content
React tabindex content

react-tabindex-content you can use tab to switch the focus of dom elements Example the following order of focus is 3->4->0 , if the allowReadOnly is t

Dec 8, 2021
A simple tab scroll view for react native

react-native-tab-flatlist ReactNative 跨平台实现TabView嵌套ScrollView滚动吸顶效果,采用react-native-tab-view+flatlist实现效果丝滑 安装 使用前需要先安装react-native-tab-view 与 react-n

Feb 23, 2022