vHooks

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.

Hooks

| 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 |

Install

npm install @booga/vhooks

Peer dependency: react ^18.

Usage

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,
});

SSR

All hooks guard browser API access — safe to import in Node/SSR environments. Server returns sensible defaults: false, { width: 0, height: 0 }, null.

Code of conduct

Contributor Covenant 2.1

License

MIT © 2026 bvasilenko