Skip to content

themre/react-closeable-tabs

Repository files navigation

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 if you need to support it.