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: ,
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

`JSX
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:

Your list

,
id: 0
},
{
tab: 'Item detail 1',
component:

Item details for 1

,
id: 1,
closeable: true
},
{
tab: 'Item detail 2',
component:

Item details for 2

,
id: 2,
closeable: true
},
{
tab: 'Item detail 3',
component:

Item details for 3

,
id: 3,
closeable: true
}
]
};

addItem = () => {
const id = new Date().valueOf();
this.setState({
data: this.state.data.concat({
tab: 'New item ' + id,
component: (

Your new component data for {id.toString().substring(6, 10)}

),
id: id,
closeable: true
}),
activeIndex: this.state.data.length
});
};

render() {
return (

Add item
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}
/>

);
}
}

render(, 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: , 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.