accessible-react-tabs

Accessible tab component for React

Properly and efficiently handles clicks, keystrokes, and tabindexes. Also allows for callbacks to be passed to perform some action when a tab is clicked (optional).

Usage

import Tabs from './Tabs';

...

const tabContent = [
  {
    label: 'Some Component',
    content: <SomeComponent />,
    callback: this.someCallback
  },
  {
    label: 'Another Component',
    content: <AnotherComponent someProp={this.someFunc} />,
    callback: () => {}
  },
  {
    label: 'Third Tab',
    content: <ThirdComponent />
  }
];

...

render() {
  return (
    <Tabs data={tabContent} />
  )
}

Styling

No styles are included, but use the following for reference:

.dz0-wrapper-tabs {

  .dz0-tabs {

    .dz0-tab {

      &.is-selected {

      }
    }
  }

  .dz0-tabpanels {

    .dz0-tabpanel {

      &.is-selected {

      }
    }
  }
}