rs-tabs

1.0.1 • Public • Published

npm version contributions welcome Build Status codecov Maintainability NSP Status Inline docs

React Simple Tabs

A simple customizable tabs component for React applications.

Installation

yarn add rs-tabs

Useage

import { Tabs, Tab } from 'rs-tabs';

Basic Example

The basic example out of the box looks like this:

React Simple Tabs

Add the <Tabs /> component and then add <Tab /> components within the wrapper. You can render React Components as well as HTML mark-up.

Tabs API basic:

  • defaultTabIndex - Change the starting default tab index, default is 0.

  • onTabChange - Accepts a callback function which is executed every time a tab has changed.

  • title - String each Tab will render within each instance, default is 'Tab Title'

import React from 'react';
import { Tabs, Tab } from 'rs-tabs';
 
class MyComponent extends React.Component {
 
  onTabChangeCallback = () => {
    alert('Tab Changed!')
  }
 
  render() {
    return (
      <Tabs
        defaultTabIndex={1}
        onTabChange={onTabChangeCallback}>
        <Tab title="Apps">
          <h2>Apps</h2>
          <p>
            Here, you’ll find the apps that you’ve built yourself or have installed and authorised.
          </p>
        </Tab>
        <Tab title="Notifications">
          <h2>Notifications</h2>
          <p>
            Update your notification preferences.
          </p>
        </Tab>
        <Tab title="Billing">
          <h2>Billing</h2>
          <p>
            Change your credit card and address we have on file.
          </p>
        </Tab>
      </Tabs>
    )
  }
}

Customised Example

Add custom CSS classes to overide the style of the components, in-inline styles are not currently supported.

Tabs API style overides:

  • wrapperClassName - Wrapping div that encapsulates instances of Tabs, each Tab and the Tab content.

  • className - Overall styling applied to the Tabs element

  • currentContentClassName - The current content rendered from the current Tab index

  • tabClassName - Overall styling applied to each Tab element

  • tabActiveclassName - Styling used for the active class for the active Tab

import React from 'react';
import { Tabs, Tab } from 'rs-tabs';
 
class MyComponent extends React.Component {
 
  onTabChangeCallback = () => {
    alert('Tab Changed!')
  }
 
  render() {
    return (
      <Tabs
        defaultTabIndex={1}
        onTabChange={onTabChangeCallback}
        wrapperClassName="modified-wrapper-class-name"
        className="modified-tabs-class-name"
        currentContentClassName="modified-content-section-class-name"
        tabClassName="modified-tab-class-name"
        tabActiveclassName="modified-active-tab-class-name"
      >
        <Tab
          title="Apps"
        >
          <h2>Apps</h2>
          <p>
            Here, you’ll find the apps that you’ve built yourself or have installed and authorised.
          </p>
        </Tab>
        <Tab title="Notifications">
          <h2>Notifications</h2>
          <p>
            Update your notification preferences.
          </p>
        </Tab>
        <Tab title="Billing">
          <h2>Billing</h2>
          <p>
            Change your credit card and address we have on file.
          </p>
        </Tab>
      </Tabs>
    )
  }
}

Default Props

As a reference for passing custom properties, these are the default property values:

Tabs.defaultProps = {
  defaultTabIndex: 0,
  wrapperClassName: 'tabs--outer-wrapper',
  className: 'tabs',
  currentContentClassName: 'tabs--current-content',
  tabClassName: 'tab',
  tabActiveClassName: 'is-active',
  onTabChange: () => {},
};
 
Tab.defaultProps = {
  title: 'Tab Title',
  className: 'tab',
  activeClassName: 'is-active',
};

Todo

  • Add support for additional styling overrides (inline, CSS Modules, Functional etc)
  • Add default accent colour as HEX / RGBA
  • Add disabled tab index and associated style overides
  • Add before tab change callback
  • Add aria properties to Tag instances e.g aria-current: false / true

Package Sidebar

Install

npm i rs-tabs

Weekly Downloads

2

Version

1.0.1

License

MIT

Unpacked Size

768 kB

Total Files

36

Last publish

Collaborators

  • cjjenkinson