react-tab-list
v1.1.1
Published
Tabs for React App
Downloads
26
Maintainers
Readme
react-tab-list
Installation
npm i react-tab-list
Simple usage:
import TabList from "react-tab-list";
const items = [
{
name: "First"
},
{
name: "Second"
},
{
name: "Third"
}
];
class SomeComponent extends React.Component{
constructor(props) {
super(props);
{
callBackFunction(tab) {
// There will be the active tab data
}
render() {
return <TabList tabs={items} onTab={this.callBackFunction}/>;
}
}
Active tab
import TabList from "react-tab-list";
class SomeComponent extends React.Component{
constructor(props) {
super(props);
this.state = {
items: [
{
name: "First",
id: "a1"
},
{
name: "Second",
id: "b2"
},
{
name: "Third",
id: "e5"
}
],
activeTabId: "b2"
}
this.callBackFunction = this.callBackFunction.bind(this);
{
callBackFunction(tab) {
this.setState({activeTabId: tab.id});
}
render() {
return <TabList tabs={this.state.items}
activeTab={{id: this.state.activeTabId}}
onTab={this.callBackFunction}/>;
}
}
Of course, you have the possibility not point an active tab(activeTab). In this case, the first item of tabs is assigned by default.
Styles:
You can include less, scss or css file in your project.
@import "./react-tab-list/styles/tab-list.less";
@import "./react-tab-list/styles/tab-list.scss";
and/or add some custome style:
<TabList tabs={[
{
name: "Item 1",
className: "my-css-class"
},
{
name: "Item 2",
className: "my-css-class"
}
]} />;