Easy Tab

A customizable and minimal line indicator tab component for React, built with flexibility in mind.
Perfect for navigation bars, tabbed interfaces, and filter menus. The line can be extended to cover the button if needed.

📦 Installation

npm install easy-tab
# or
yarn add easy-tab

🚀 Usage

import { EasyTab, useEasyTab } from "easy-tab";
import "easy-tab/style.css";

export function App() {
  const { activeTab } = useEasyTab();

  return (
    <EasyTab
      data={["Overview", "Settings", "Billing"]}
      defaultActiveTab="Settings"
      indicatorColor="crimson"
      onClick={(tab) => console.log("Clicked:", tab)}
    />
  );
}

With defaultActiveTab

You can control which tab is active by default using the defaultActiveTab prop:

<EasyTab
  data={["Overview", "Settings", "Billing"]}
  defaultActiveTab="Settings"
/>

With onClick

You can listen for tab changes:

<EasyTab
  data={["Overview", "Settings", "Billing"]}
  defaultActiveTab="Overview"
  onClick={(tab) => console.log("Clicked:", tab)}
/>

Custom Styles

You can pass styles for the wrapper, buttons, overlay, and indicator:

<EasyTab
  data={["Tab A", "Tab B", "Tab C"]}
  indicatorColor="crimson"
  indicatorRadius="8px"
  indicatorHeight={80}
  wrapperStyles={{ padding: "1rem" }}
  tabButtonStyles={{ fontSize: "14px", padding: "0.5rem 1rem" }}
  tabButtonOverlayStyles={{ color: "#fff" }}
/>

🧩 Hook: useEasyTab

The useTab hook is provided for managing tab state independently if needed.

import { useEasyTab } from "easy-tab";

function MyComponent() {
  const { activeTab, setActiveTab } = useEasyTab("Overview");

  return (
    <>
      <p>Active Tab: {activeTab}</p>
      <button onClick={() => setActiveTab("Settings")}>Go to Settings</button>
    </>
  );
}

🔑 Props

| Prop | Type | Required | Default | Description | | -------------------------- | --------------- | -------- | ----------- | --------------------------------------------------------------- | | data | string[] | ✅ Yes | [] | The list of tab labels to display. | | defaultActiveTab | string | ❌ No | data[] | Initial active tab | | wrapperStyles | CSSProperties | ❌ No | {} | Inline styles for the outer wrapper. | | overlayWrapperStyles | CSSProperties | ❌ No | {} | Inline styles for the overlay wrapper containing the indicator. | | tabListStyles | CSSProperties | ❌ No | {} | Styles applied to the tab list container. | | tabButtonStyles | CSSProperties | ❌ No | {} | Styles applied to the base tab buttons. | | tabButtonOverlayStyles | CSSProperties | ❌ No | {} | Styles applied to overlay tab buttons. | | indicatorRadius | string | ❌ No | "10px" | Border radius of the line indicator. | | indicatorOffsetHeight | number | ❌ No | 90 | Height of the indicator area (in percentage). | | indicatorColor | string | ❌ No | "#2090ff" | Color of the line indicator. | | indicatorColor | (tab: string) => void | ❌ No | ~ | Callback when tab is clicked |

You can override the default styles using the provided props (wrapperStyles, tabButtonStyles, etc.). If you want to fully customize the appearance, you can override the .tab__* classes in your CSS.

Default CSS classes:

• .easy--tab--wrapper — Wrapper for the entire tab component.

• .easy--tab--list — Base tab list container.

• .easy--tab--button — Base tab button.

• .easy--tab--clip--path--container — Overlay container that handles the clip-path animation.

• .easy--tab--button--overlay — Overlay button style for active indicator.

📄 License

MIT © Kehinde Babalola