react-tab-container v1.0.3

react-tab-container

Installation

npm i react-tab-container

Usage

The following example shows pretty much everything you need to know. In order to get instant tabbed content simply pass the components you wish to split across tabbed pages as children to the TabContainer component. Each child will need to be given a tabLabel prop so the TabContainer knows how to label each tab. You will also need to pass a theme prop into the component itself. You can use the included themes or create your own.

import TabContainer from 'react-tab-container';

const MyComponent = props => {
  return (
    <TabContainer theme={{ base: 'default', override: myTheme }}>
      <div tabLabel="First tab">Content on page 1</div>
      <div tabLabel="Second tab">Content on page 2</div>
    </TabContainer>
  );
};

Theming

TabContainer comes with several themes by default which will be listed below. To use these simple pass the name of the theme into the base argument of the theme prop. You can also create and use your own theme by passing the theme object into base or you can just override some parts of the base themes by passing a partial theme object into override.

List of default themes

• default - this is the default theme with a rounded aesthetic
• material - squared theme in a style similar to the ubiquitous Material design by Google
• (upcoming) classic - gradient and border heavy design reminiscent of older web design

TODO

• Ability for user to pass in their own tab and container components
• Props to allow tabs to be displayed at the bottom or the side of the content
• PropTypes and general refactoring
• Finish off this readme

Contributing

The repo can be found at https://github.com/jakeec/react-tab-container.git

If you find a bug or have suggestions for how to improve the component feel free to put in a PR.