React closeable tabs
Simple Closeable tabs with React.
Usage
First install package
npm i -S react-closeable-tabs (yarn add react-closeable-tabs)
To start using closeable tabs, you need to pass data
prop which is an array of objects. Each object has the following properties:
{
tab: 'Tab text',
component: <YourComponent />,
id: 'uniqueId',
closeable: true
}
If you don't want tab to be closeable (not to have X to close it), you can set closeable
property to false
.
Example
import React from 'react';import { render } from 'react-dom'; import CloseableTabs from 'react-closeable-tabs'; class Demo extends React.Component { state = { data: [ { tab: 'List', component: <div><h1>Your list</h1></div>, id: 0 }, { tab: 'Item detail 1', component: <div>Item details for 1</div>, id: 1, closeable: true }, { tab: 'Item detail 2', component: <div>Item details for 2</div>, id: 2, closeable: true }, { tab: 'Item detail 3', component: <div>Item details for 3</div>, id: 3, closeable: true } ] }; addItem = () => { const id = new Date().valueOf(); this.setState({ data: this.state.data.concat({ tab: 'New item ' + id, component: ( <div> Your new component data for {id.toString().substring(6, 10)} </div> ), id: id, closeable: true }), activeIndex: this.state.data.length }); }; render() { return ( <div> <button onClick={this.addItem}>Add item</button> <CloseableTabs tabPanelColor='lightgray' data={this.state.data} onCloseTab={(id, newIndex) => { this.setState({ data: this.state.data.filter(item => item.id !== id), activeIndex: newIndex }); }} activeIndex={this.state.activeIndex} /> </div> ); }} render(<Demo />, document.querySelector('#demo'));
API
Prop | Type | Default | Description |
---|---|---|---|
data | Array | [] | Array of objects that need to be in the following format: {tab: 'Tab text', component: <YourComponent />, id: 'uniqueId', closeable: true} |
activeIndex | Number | 0 | Define which tab is active by default |
identifier | String | id | You can define new key for unique ID in your data object |
onCloseTab | Function(id, newIndex) | null | Callback function that is invoked after clicking close tab. It passes id of closed object tab |
onTabClick | Function(id, newIndex, oldIndex) | null | Callback function that is invoked after clicking tab. It passes id of clicked tab |
onBeforeTabClick | Function(id, newIndex, oldIndex) | null | Callback function that is invoked before clicking tab. It passes id of clicked tab |
tabPanelColor | String | #f2f2f2 | Background of tabPanel holder |
renderClose | Function | 'X' | Custom content render of close button |
closeTitle | String | 'Close tab' | Close button tooltip text |
mainClassName | String | '' | Option to add additional class to main wrapping panel |
tabPanelClass | String | '' | Option to add additional class to tabPanel |
tabContentClass | String | '' | Option to add additional class to contentPanel |
noTabUnmount | boolean | false | if true, all tabs will be mounted on start, will be toggled with CSS display (since version 1.1.0) |
Limitations
This library does not work in IE11. Use polyfill for Object.values
and Number.isInteger
if you need to support it.