@bumaga/tabs

Headless tabs component for React

Features

• 📦 super small, 381 B vs 3.5kB react-tabs
• 🚫 no styles, just logic. Style what you want, as you want
• 🎣 components and hooks API

Install

npm install @bumaga/tabs

yarn add @bumaga/tabs

Usage

With components

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>
);

With hooks

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>
);