react-simply-tabs

1.0.4 • Public • Published

react-simply-tabs

npm version npm bundle size GitHub license

Simple and small react.js tabs component

Table of contents

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

Edit react-simply-tabs

Package Sidebar

Install

npm i react-simply-tabs

Weekly Downloads

16

Version

1.0.4

License

MIT

Unpacked Size

11.5 kB

Total Files

6

Last publish

Collaborators

  • vadymshymko