React hooks for state and UI mechanics. Viewport observation, breakpoint detection, media queries, gesture primitives, controlled/uncontrolled bridges, persistent state. One hook per concern, composable, dependency-free beyond React 18.
| Hook | Returns |
|---|---|
useMediaQuery(q) |
boolean — tracks window.matchMedia(q), SSR-safe |
useBreakpoint() |
"sm" | "md" | "lg" | "xl" | "2xl" — vTheme breakpoint resolution |
useViewport() |
{ width, height } — resize-observed window dimensions |
useIntersection(ref, opts?) |
IntersectionObserverEntry | null |
useResizeObserver(ref) |
{ width, height } — element box size |
useDebouncedValue(v, ms) |
T — deferred by ms after last change |
useThrottledValue(v, ms) |
T — leading + trailing throttle |
useControllableState({ prop, defaultProp, onChange }) |
[T | undefined, SetFn<T>] — Radix-pattern bridge |
useLocalStorage(key, initial) |
[T, (v: T) => void] — persisted, namespaced v:key |
useEventListener(target, event, handler, opts?) |
void — attaches with cleanup |
useKeyPress(combo, handler) |
void — e.g. "ctrl+k", "shift+enter" |
useClickOutside(ref, handler) |
void — mousedown + touchstart |
useFocusTrap(ref, active) |
void — traps Tab focus, restores on deactivate |
useSafeLayoutEffect |
useLayoutEffect on client, useEffect on server |
npm install @booga/vhooksPeer dependency: react ^18.
import { useBreakpoint, useLocalStorage, useControllableState } from "@booga/vhooks";
const bp = useBreakpoint(); // "sm" | "md" | "lg" | "xl" | "2xl"
const [theme, setTheme] = useLocalStorage("theme", "light");
const [open, setOpen] = useControllableState({
prop: controlledOpen,
defaultProp: false,
onChange: onOpenChange,
});All hooks guard browser API access — safe to import in Node/SSR environments. Server returns sensible defaults: false, { width: 0, height: 0 }, null.
MIT © 2026 bvasilenko