react-simply-tabs

Simple and small react.js tabs component

Table of contents

• Installation
• Usage
• Props
• Demo

Installation

npm

npm install react-simply-tabs --save

yarn

yarn add react-simply-tabs

Usage

Basic Example:

import React, { useState } from 'react';
import Tabs from 'react-simply-tabs';

const App = () => {
  const [activeTabIndex, setActiveTabIndex] = useState(0);

  return(
    <Tabs
      activeTabIndex={activeTabIndex}
      onRequestChange={setActiveTabIndex}
      controls={[
        <button type="button">
          Show 1
        </button>,
        <button type="button">
          Show 2
        </button>,
        <button type="button">
          Show 3
        </button>,
      ]}
    >
      <div>1 tab</div>

      <div>2 tab</div>

      <div>3 tab</div>
    </Tabs>
  );
};

Props

Name | Type | Default Value | Description
---- | ---- | ------------- | -------------- activeControlProps | object | {} | Props (valid DOM props or your custom props) for active control node. Will be merged with default control props activeTabIndex | number | 0 | Index of visible tab activeTabProps | object | {} | Props (valid DOM props or your custom props) for active tab node. Will be merged with default tab props children | node | null | Tabs nodes controls | array of nodes | [] | Array of controls nodes controlsWrapperProps | object | {} | DOM props for div inside which will be rendered controls hiddenTabProps | object | {} | Props (valid DOM props or your custom props) for hidden (not active) tab node. Will be merged with default tab props onRequestChange | function | | Function that will be run when the activeTabIndex is requested to be changed (either by clicking on control) (required) renderOnlyActiveTab | boolean | false | If true hidden tabs will not be rendered tabsWrapperProps | object | {} | DOM props for div inside which will be rendered tabs wrapperProps | object | {} | DOM props for div inside which will be rendered tabs && controls

Demo