A Headless And Flexible Tabs Built With React Hooks

react-headless-tabs

Headless, simple, and highly flexible tab-like primitives built with react hooks.

Features

• 🌱 Under 1KB minified and gzipped
• 🚛 Bring your own DOM!
• ✨ Correctly handles dynamic tabs, no more empty tab panels!
• 🤹‍♂️ Well suited for complex use cases, like drag and drop!

Getting started

npm

npm install react-headless-tabs

API

const {
  activeTab,
  setActiveTab,
  TabPanel,
} = useTabs(tabs, defaultTab?)

tabs: string[]

Strings representing the list of tabs, can be static or dynamic.

defaultTab?: string | null

The tab that should initially be selected (defaults to the first one)

Returns

TabPanel: Component

Renders lazily and stays mounted after it has rendered once

activeTab: string | null

The currently selected tab, can be null if there are no tabs or if defaultTab was initialized to null

setActiveTab: (tab: string | null) => void

Update the selected tab, or pass null to select none.

Download Details:

Author: Zertz
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/Zertz/react-headless-tabs
License: MIT

#react #javascript #web-development