React-simple-tab NPM

React Simple Tab

Example

https://rudolph-miller.github.io/react-simple-tab

Feature

customizable style

Install

npm install react-simple-tab

Usage

window.React = require('react');
import { render } from 'react-dom';
import React, { Component, PropTypes } from 'react';
import SimpleTab from 'react-simple-tab';

const Styles = {
  tabContent: {
    border: 'solid 2px #ebeced',
    padding: '15px'
  },
  app: {
    tabStyle: {
      fontSize: '20px'
    },
    labelListStyle: {
      margin: 0,
      padding: 0,
      bottom: '-2px',
      position: 'relative'
    },
    tabContentStyle: {
      padding: '10px'
    },
    activeTabContentStyle: {
      borderWidth: '4px 2px 0px 2px',
      borderColor: '#ff6c60 #ebeced transparent #ebeced',
      borderStyle: 'solid',
      zIndex: 1,
      background: 'white',
      fontWeight: 'bold'
    }
  }
};

class TabContent extends Component {
  render() {
    return (
      <div style={Styles.tabContent}>
        {this.props.children}
      </div>
    );
  }
}

class App extends Component {
  render() {
    const tabs = [
      { title: 'Tab 1', content: (<TabContent>Content 1</TabContent>) },
      { title: 'Tab 2', content: (<TabContent>Content 2</TabContent>) },
      { title: 'Tab 3', content: (<TabContent>Content 3</TabContent>) }
    ].map(tab => {
      return Object.assign({}, tab, {
        style: Styles.app.tabContentStyle,
        activeStyle: Styles.app.activeTabContentStyle
      });
    });

    return (
      <SimpleTab
        tabs={tabs}
        style={Styles.app.tabStyle}
        labelListStyle={Styles.app.labelListStyle} />
    );
  }
}

render(<App />, document.getElementById('app'));

PropTypes

tabs: React.PropTypes.array.isRequired
style: React.PropTypes.object
labelListStyle: React.PropTypes.object

Properties

tabs: Object
- title: String
  - tab label title
- content: React Element
  - tab content
- style: Object
  - the default style applied to tab label
- activeStyle: Object
  - the style applied to tab label when the tab is active
style: Object
- the style applied to <div /> wrapping tabs
listLabelStyle: Object
- the style applied to <ul /> wrapping tab labels