ndla-tabs

ndla-tabs

A simple tabs component. Mainly a wrapper for react-tabs.

Installation

$ yarn add --save ndla-tabs

$ npm install ndla-tabs --save

Usage

Styling

/* Your project's main .scss import file */
@import '~ndla-tabs/scss/tabs'; // with webpack and sass-loader
@import '../path/to/node_modules/ndla-tabs/scss/tabs'; // direct reference

Basic example

import Tabs from 'ndla-tabs';
import BananaComponent from 'banana';
import PickleComponent from 'picke';

const Fruits = () => {
  const fruitTabs = [
    { title: 'Apple', content: <p>An apple a day keeps the doctor away</p> },
    { title: 'Orange', content: () => <h1>Orange is the new black</h1> },
    { title: 'Banana', content: <BananaComponent /> },
    { title: 'Pickle', content: <PickleComponent />, disabled: true }, // No vegetables allowed!
  ];
  return <Tabs tabs={fruitTabs} />;
};

Example where selected tab is controlled via selectedIndex prop

import Tabs from 'ndla-tabs';
import fruitTabs from 'fruit-tabs';

class FruitTabSelector extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
    };
  }

  render() {
    const { index } = this.state;
    return (
      <div>
        <button onClick={() => this.setState({ index: 1 })}>
          Show banana tab
        </button>
        <Tabs selectedIndex={index} tabs={fruitTabs} />
      </div>
    );
  }
}

PropTypes

Props	Type	Required	Description
tabs	array	*	An array of tabs represented as objects. An tab object requires the following properties: title, content. Property disabled is optional.
onSelect	func		Is called when a tab is selected. Current index and last index will be passed as parameters.
selectedIndex	object		Is the tab to select when rendered. Used when you want to control which tab is rendered from the a parent component.
forceRenderTabPanel	bool		Is false by default. Set to true to render all tab's content instead of only selected tab content.
modifier	string		An BEM modifier which is added to all html classes.

Server side rendering

resetIdCounter should be called on server before render to prevent server and client markup diff. Example:

  import { resetIdCounter } from 'ndla-tabs';
  resetIdCounter();
  ReactDOMServer.renderToString(...);