react-dyn-tabs

React Dynamic Tabs with full API

document

Features

• Based on React hook
• Open & Close & Select & Refresh
• lazy/eager loading
• Customizable style
• Full API
• Return to last used tab when closing selected tab
• PanelList can be rendered outside the TabList container
• ARIA accessible

Table of Contents

• Installation
• Basic Example
• Options
  • tabs
  • selectedTabID
  • direction
  • tabComponent
  • defaultPanelComponent
  • accessibility
  • onLoad
  • onInit
  • onChange
  • beforeSelect
  • onSelect
  • onOpen
  • beforeClose
  • onClose
  • onDestroy
• Methodes
  • isOpen
  • open
  • isSelected
  • select
  • close
  • refresh
  • getOption
  • setOption
  • getTab
  • setTab
  • on
  • one
  • off
• tabData
• Lazy Loading
• Styling
• License

Installation

$ npm install react-dyn-tabs --save

Basic Example

import React from 'react';
import useDynTabs from 'react-dyn-tabs';
import 'react-dyn-tabs/style/react-dyn-tabs.css';
import 'react-dyn-tabs/themes/default.css';
import ContactComponent from './contact-component';

export default () => {
  const options = {
     tabs : [
     {
      id : '1',
      title : 'home',
      closable: false,
      panelComponent : porps => <p> home content </p>
     },
     {
      id : '2',
      title : 'contact',
      panelComponent : ContactComponent
     }
     ],
     selectedTabID : '1'
  };
  const [TabList , PanelList , api] = useDynTabs(options);
  return (
    <div>
      <TabList></TabList>
      <PanelList></PanelList>
    </div>
  );
};

Styling

react-dyn-tabs does not include any style loading by default. Default stylesheets and themes are provided and can be included in your application if desired.

import 'react-dyn-tabs/style/react-dyn-tabs.css';
import 'react-dyn-tabs/themes/default.css';

License

MIT