Reusable Tabs Component For React - useTabs

Description:

useTabs is a React hook to create reusable smooth tab highlights.

How to use it:

1. Installation.

# Yarn
$ yarn add @olivieralexander/usetabs
# NPM
$ npm i @olivieralexander/usetabs

2. A basic example.

import { useRef } from "react";
import useTabs from "../hooks/useTabs";

export default function Home() {
  const containerRef = useRef(null);
  const defaultRef = useRef(null);
  const { setHightlight, highlightStyles } = useTabs({
    container: containerRef,
    // defaultTab: defaultRef,
    // duration: 150,
  });
  const tabs = [
    {
      name: "Tab 1",
      id: "tab-1",
    },
    {
      name: "Tab 2",
      id: "tab-2",
    },
    {
      name: "Tab 3",
      id: "tab-3",
    },
  ];
  return (
    <main className="w-screen h-screen grid place-items-center">
      <ul className="w-[50%] flex justify-between relative" ref={containerRef}>
        {tabs.map((tab, i) => (
          <li
            key={tab.id}
            className="py-2 px-8 border rounded cursor-pointer"
            ref={i === 1 ? defaultRef : null}
            onMouseEnter={setHightlight}
          >
            {tab.name}
          </li>
        ))}
        <div
          style={highlightStyles}
          className="bg-gray-500 bg-opacity-10 rounded-sm"
        />
      </ul>
    </main>
  );
}