react-tabbar

create tab bars

Usage no npm install needed!

<script type="module">
  import reactTabbar from 'https://cdn.skypack.dev/react-tabbar';
</script>

README

Information

Packagereact-tabbar
Description TabBar component
Browser Version >= IE6*

Usage

  • defaultTab
    • optional
    • string
    • must be a key from props.tabs
  • tabs
    • required
    • object where the key is a unique tab name, and the value is a tab descriptor
    • tab descriptor attributes
      • label
        • optional, will add a label element if provided
        • can be a string with text or a renderable node
      • icon
        • optional, will add an icon element if provided
        • can be a string with the class name or a renderable node
      • view
        • required
        • must be a renderable
var App = React.createClass({
  displayName: 'demo',
  render: function(){
    return TabBar({
      defaultTab: 'favorites',
      tabs: {
        friends: {
          label: 'Friends',
          icon: 'fa-friends',
          view: FriendsView
        },
        favorites: {
          label: 'Favorites',
          icon: 'fa-favorite',
          view: FavoritesView
        }
      },
      onTabChange: function(tabName, tab){
        console.log('tab changed', tabName, tab);
      }
    });
  }
});