Declaritive, accessible tabs in React that collapse into accordions on mobile.

This component uses the Context API, therefore there is a minimum requirement of React 16.3.

Example

Installation

npm i @cellosignal/react-tabs

Usage

const AwesomeTabs = () => {
  return (
    <Tabs>
      <Tab title="Tab One">
        <h1>Ain't this tidy?</h1>
        <p>I'm more text</p>
      </Tab>
      <Tab title="Tab Two">
        <SomeOtherComponent  />
      </Tab>
    <Tabs>
  );
}

API

There are a number of options available for targeting styles and providing data to the components.

Prop	Component	Description
className	<Tabs>	Add your classNames for styling, this adds it at the top level
contentClassName	<Tabs>	className for wrapping your content
className	<Tab>	className to add to each tab
activeClassName	<Tab>	className added to the active tab
title	<Tab>	String, the title of the Tab
toggleClassName	<Tabs>	className added to the button, only on mobile
mobileBreakpoint	<Tabs>	Mobile breakpoint in px
tabListClassName	<Tabs>	className added to the tab list

Development

We use storybook for component development, to get up and running follow these steps:

• 1. Clone the repository, cd into the root and run npm install
• 2. Open two terminal windows, in the first window:
• 3. cd into the root of the project run npm run dev, this will start webpack
• 4. In the second window, cd into the project and run npm run storybook
• 5. If you have a project that you are developing locally you should npm link this package, to do this you need to:
  • 5.1. In your terminal, cd into this project and run npm link
  • 5.2. In your terminal, cd into your application and run npm link @cellosignal/react-tabs

Contributing

Please see the contributing guidlines.