https://github.com/nstr/react-tab-list
Special react component for menu, filters and etc.
https://github.com/nstr/react-tab-list
es6 javascript react react-component reactjs
Last synced: about 1 year ago
JSON representation
Special react component for menu, filters and etc.
- Host: GitHub
- URL: https://github.com/nstr/react-tab-list
- Owner: nstr
- License: mit
- Created: 2017-02-05T18:12:37.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-18T13:41:13.000Z (over 8 years ago)
- Last Synced: 2025-03-24T06:54:36.334Z (over 1 year ago)
- Topics: es6, javascript, react, react-component, reactjs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-tab-list
- Size: 11.7 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-tab-list
* [Installation](#installation)
* [Simple usage](#simple-usage)
* [Active tab](#active-tab)
* [Styles](#styles)
## Installation
```
npm i react-tab-list
```
## Simple usage:
```jsx
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 ;
}
}
```
## Active tab
```jsx
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 ;
}
}
```
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.
```less
@import "./react-tab-list/styles/tab-list.less";
```
```scss
@import "./react-tab-list/styles/tab-list.scss";
```
and/or add some custome style:
```jsx
;
```