react-closeable-tabs

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.