React component for tabs with a clean and flexible API.
Tabs component for React with the simplest API
This JSX:
var Tabs=require('react-tabs-component');
<Tabs
defaultTabNum={1}
tabNames={['Tab A','Tab B','Tab C']}
classPrefix='tabs-'
>
<section>Tab A Content</section>
<section>Tab B Content</section>
<section>Tab C Content</section>
</Tabs>
renders this HTML:
<div>
<nav class="tabs-tab-container">
<span class="tabs-tab" data-tabnum="0">Tab A</span>
<span class="tabs-tab tabs-active-tab" data-tabnum="1">Tab B</span>
<span class="tabs-tab" data-tabnum="2">Tab C</span>
</nav>
<section>Tab B Content</section>
</div>
In the example above, only the content for Tab B displays, since Tab B is the active tab.
Use the Common JS Module with Node and either Browserify or WebPack.
npm install react-tabs-component --save
require('react-tabs-component')
npm test
tabNames
—array of strings or components that will display in each tab.TabNames
. For example, if the first tab is active, then the first child of the Tabs component will render.classPrefix
—a string to add to the beginning of each CSS class used internally by the Tabs component. The default is the empty string (''
), so if this prop isn't specified, then class names will be used as in the example below:JSX:
var Tabs=require('react-tabs-component');
<Tabs
defaultTabNum={1}
tabNames={['Tab A','Tab B','Tab C']}
>
<section>Tab A Content</section>
<section>Tab B Content</section>
<section>Tab C Content</section>
</Tabs>
HTML:
<div>
<nav class="tab-container">
<span class="tab" data-tabnum="0">Tab A</span>
<span class="tab active-tab" data-tabnum="1">Tab B</span>
<span class="tab" data-tabnum="2">Tab C</span>
</nav>
<section>Tab B Content</section>
</div>
willChange
—fires before the tab changes. Return false
from willChange
to prevent the active tab from changing.didChange
—fires after the tab changes.In the example below, clicking Tab C
will produce the following results:
Tab B Content
un-renders and Tab C Content
is rendered.JSX:
var willChange=function(newTabNum,oldTabNum){
console.log('will change tabs from '+newTabNum+' to '+oldTabNum);
};
var didChange=function(newTabNum,oldTabNum){
console.log('changed tabs from '+newTabNum+' to '+oldTabNum);
};
<Tabs
defaultTabNum={1}
tabNames={['Tab A','Tab B','Tab C']}
classPrefix='tabs-'
>
<section>Tab A Content</section>
<section>Tab B Content</section>
<section>Tab C Content</section>
</Tabs>