React-state-tabs NPM

react-state-tabs

Your zero-effort content hidden-visible tabs. see examples live on codesandbox.io 🧰

Features

🤯 Easy to use, Just two components and you're good to go.
🚫 Disable any tab you want.
♿ Accessibility, Screen readers and Keyboard Control.
🪅 Animated transition element.

Quickstart ⤵️

import { useState } from "react"; import { Tab, Tabs } from "react-state-tabs"; import "./lineTabExample.css";

function LineCursorExample() { const tabData, setTabData = useState("");

const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));

async function fetchSomeData(activeId: number) { setTabData("fetching..."); await delay(1000); return setTabData(fetched data from ${activeId}); }

return ( <Tabs defaultActiveTab={3} callbackOnMount={fetchSomeData} tabClassName="mytab" activeClassName="mytab--active" disabledClassName="mytab--disabled" contentContainerClassName="mytab-content" cursorClassName="mytab-cursor"

>
  <Tab id={1} tabName="Tab">
    <p>{tabData}</p>
    <button type="button">another button</button>
  </Tab>
  <Tab id={2} tabName="Tab Two" disabled={true}>
    <p>{tabData}</p>
  </Tab>
  <Tab id={3} tabName="Tab Three large">
    <button type="button">button</button>
    <p>{tabData}</p>
  </Tab>
</Tabs>

); }

export default LineCursorExample;

```css
/* 
* lineCursorExample.css
*/

.mytab {
  padding: 10px 20px;
}

.mytab--active {
  color: #9f7eed;
}

.mytab--disabled {
  color: gray;
  cursor: default;
}

.mytab-content {
  background-color: #141414;
  padding: 1em;
}

.mytab-cursor {
  background-color: #9f7eed;
  height: 3px;

  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

About the cursor (the bottom line)

There are two ways the animated cursor can behave: as a line (shown on the example above) or as a background.

line cursor: just pass any className you want on the cursorClassName prop and define the height, background, or animations desired to your cursor and it's done.
background cursor: in order to make the cursor animated and fill the active tab background pass a cursorAsBackground={true} prop and remove/do not add the height property from your cursorClassName styles.

API

`<Tabs />`

Prop	Description	Type	Default
defaultActiveTab?	set a tab to be active as default	`number \\| undefined`	1
callbackOnMount?	callback when tab is mounted/changed	`(active: number) => void`	-
tabClassName?	className to all tab "buttons"	`string \\| undefined`	-
activeClassName?	className to all active tab "buttons"	`string \\| undefined`	-
disabledClassName?	className to all disabled tab "buttons"	`string \\| undefined`	-
contentContainerClassName?	className to the container of the content being shown	`string \\| undefined`	-
cursorClassName?	className to the animated cursor, be it line or background	`string \\| undefined`	-
cursorAsBackground?	make the cursor height fit the active tab "buttons"	`boolean \\| undefined`	false

`<Tab />`

Prop	Description	Type	Default
id	unique ID to match active tab with content visible	`number *required`	-
tabName	name shown on tab button	`string *required`	-
disabled?	disable a specific tab	`boolean \\| undefined`	-