Headless tabs component for React
- 📦 super small, 381 B vs 3.5kB react-tabs
- 🚫 no styles, just logic. Style what you want, as you want
- 🎣 components and hooks API
npm install @bumaga/tabs
yarn add @bumaga/tabs
import React from 'react'
import { Tabs, Tab, Panel } from '@bumaga/tabs'
export default () => (
<Tabs>
<div>
<Tab><button>Tab 1</button></Tab>
<Tab><button>Tab 2</button></Tab>
<Tab><button>Tab 3</button></Tab>
</div>
<Panel><p>Panel 1</p></Panel>
<Panel><p>Panel 2</p></Panel>
<Panel><p>panel 3</p></Panel>
</Tabs>
);import React from "react";
import { Tabs, useTabState, usePanelState } from "@bumaga/tabs";
const Tab = ({ children }) => {
const { onClick } = useTabState(children);
return <button onClick={onClick}>{children}</button>;
};
const Panel = ({ children }) => {
const isActive = usePanelState(children);
return isActive ? <p>{children}</p> : null;
};
export default () => (
<Tabs>
<div>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
</div>
<Panel>Panel 1</Panel>
<Panel>Panel 2</Panel>
</Tabs>
);