Componentform

Hooks

SSR-safe React hooks: media query, localStorage, intersection, click-outside, copy, hotkey, and debounce.

Preview

Live Preview

useLocalStorage:

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add hooks

Or install the full npm package:

npm install bigbullui

Usage

import { useCopy } from "@/components/ui/lib/hooks";

const { copied, copy } = useCopy();
<button onClick={() => copy("BB-2026")}>{copied ? "Copied!" : "Copy"}</button>

Props

Prop	Type	Description
useCopy	() => { copied: boolean; copy: (text: string) => void }	Clipboard copy with copied flag.
useLocalStorage	<T>(key: string, initial: T) => [T, setter]	Persisted state hook.
useMediaQuery	(query: string) => boolean	SSR-safe media query match.
useDebounce	<T>(value: T, delay: number) => T	Debounced value hook.
useHotkey	(combo, handler) => void	Keyboard shortcut hook.
useIntersection	(options?) => ref + visible	IntersectionObserver hook.
useClickOutside	(ref, handler) => void	Outside-click dismissal hook.