useTabs
Reusable way to create smooth tab highlights.
Installation
Install my-project with npm
npm install @olivieralexander/usetabs
Usage/Examples
To get started you will need a couple things:
- A component or element to be used as the highlighter.
- A container element with a ref and position relative that will wrap your tabs.
useTabs will return 2 things:
setHightlight(): function to trigger the hightlighthightlightStyles: object containing styles that will need to be applied on your highlight element.
Note: These examples use TailwindCSS but you're free to use any styling library you want.
setHightlight
<li onMouseEnter={setHightlight}>
Tab 1
</li>
hightlightStyles
<div
style={highlightStyles}
className="bg-gray-500 bg-opacity-10 rounded-sm"
/>
Full 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>
);
}
API Reference
useTabs
| Parameter | Type | Description |
|---|---|---|
container |
ref |
Required. Ref of your tab container |
defaultTab |
ref |
Ref of a tab you would like to set as the default highlighted tab |
duration |
number |
Number to represent the amount of time in ms how long the animations should take |
Acknowledgements
- Emil Kowalksi
4 Nov 28, 2022
8 Nov 8, 2022
2 May 24, 2022
130 Dec 14, 2022
148 Dec 26, 2022
3 Sep 28, 2021
65 Dec 14, 2022
12 Dec 3, 2022
26 Dec 14, 2022
18 Aug 15, 2022