ndla-tabs v0.8.0

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

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(...);