React Router Tabs

Simple navigation tabs for React Router 4 and 5.

Why?

There are many plain React solutions for tabs that conditionally render content based on some local state. In a React Router app it would be preferable to keep rendering logic consistent by only using <Route /> components. This library exports a simple component called <NavTab /> which wraps React Router's Link and makes it behave more like a tab.

Benefits of this library

• Simplifies assigning tabs to paths
• Abstracts matching, setting active styles and onClick handling
• <RoutedTabs /> compound component lets you set props for nested tabs (classnames, styles, path prefix, ...others)
• Easy to use with different route setups (see examples)
• Uses React Router's own API
• No state, no assertions about tab content, just navigation

Installation

via yarn

$ yarn add react-router-tabs

or npm

$ npm install --save react-router-tabs

Dependencies

• react-router-dom
• prop-types

Peer dependencies

• react

Usage

import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import { RoutedTabs, NavTab } from "react-router-tabs";
import { Admins, Moderators, Users } from "./components";

// with default styles:
import "styles/react-router-tabs.css";

const UsersPage = ({ match }) => {
  return (
    <div>
      <NavTab to="/admins">Admins</NavTab>
      <NavTab to="/moderators">Moderators</NavTab>
      <NavTab to="/users">Users</NavTab>

      <Switch>
        <Route
          exact
          path={`${match.path}`}
          render={() => <Redirect replace to={`${match.path}/admins`} />}
        />
        <Route path={`${match.path}/admins`} component={Admins} />
        <Route path={`${match.path}/moderators`} component={Moderators} />
        <Route path={`${match.path}/users`} component={Users} />
      </Switch>
    </div>
  );
};

export default UsersPage;

Components

<NavTab />

Forked and adapted from React Router's <NavLink />. More info on below props in the official React Router docs.

<RoutedTabs /> (optional)

Helper compound component to pass props to all child <NavTab> components. Renders as a div by default.

<RoutedTabs
  startPathWith={match.path}
  tabClassName="tab-link"
  activeTabClassName="active"
>
  <NavTab to="/admins">Admins</NavTab> // links to `${match.path}/admins`
  <NavTab to="/moderators">Moderators</NavTab>
  <NavTab to="/users">Users</NavTab>
  // etc
</RoutedTabs>

NB: NavTab must be the direct child of RoutedTabs for it to do anything. If a standard DOM element is detected, no props will be passed down. If your DOM tree requires more complex nesting, you probably don't want to use this helper.

Styling

<NavTab> can take a className and activeClassName, and/or style and activeStyle props. If no classes are provided, it will be given defaults (see API above).

<RoutedTabs> can also be provided with tabClassName prop to pass to its children. This will be overwritten if the <NavTab> has its own className prop.

A default stylesheet is provided in both .css and .scss at:

node_modules/react-router-tabs/styles/react-router-tabs

Please note these styles have not been tested and are provided mainly as an example to work from.

Acknowledgements

Thanks to the React Router team. This module only exists to simplify one of a thousand use-cases for their great library.

Author

Chace Stewart (chacestew@gmail.com)

License

MIT

Changelog

[1.3.0] - 2019-04-07

• Fixed incompatbility with React Router 5 (#19)
• Added Rollup with CommonJS and ESM builds (previous build was CommonJS via babel-cli)
• Added production build (uglifies and removes proptypes)
• Upgraded to Babel 7

[1.2.0] - 2018-06-16

• Added allowClickOnActive to NavTab to support re-selecting active tabs.
• Added check to RoutedTabs to prevent passing down props to DOM elements.
• Added elementType prop to RoutedTabs to change the container element.
• Extended NavTab's to prop-type to include objects.
• Fixed NavTab's aria-current attribute and handling of missing paths (as per updates to React Router's NavLink).
• Fixed RoutedTab's incorrect prop-type name for activeTabClassName.

[1.1.1] - 2018-03-22

• Fixed RoutedTab's activeTabStyle prop-type to be object.

[1.1.0] - 2018-02-11

• Added disabled prop to NavTab. Prevents the click action when true.
• NavTab exact prop now correctly defaults to true. This enables nested tabs by default and keeps presentational behaviour consistent with RR's NavLink.
• NavTab given default classNames. Previously these were set only when RoutedTabs component was used.
• Example styling updated to not require the parent "react-router-tabs" class, so that styles can work when NavTabs are used on their own. The class will still be given to RoutedTabs for compatibility with older versions of the stylesheet.
• Removed RoutedTabs usage wherever not needed in examples.
• Documentation fixes.

[1.0.3] - 2017-12-30

• RoutedTabs updated to handle null children (when tabs are rendered conditionally).

[1.0.2] - 2017-11-17

• Added gif and badges to readme.

[1.0.0 - 1.0.1] - 2017-11-16

• Initial commit.