Headless tabs component for React
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();
return <button onClick={onClick}>{children}</button>;
};
const Panel = ({ children }) => {
const isActive = usePanelState();
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>
);