Skip to main content

​
Overview

The @kuzenbo/hooks package provides 70+ production-ready React hooks for common UI patterns, state management, DOM interactions, and more. All hooks are framework-agnostic and can be used independently of other Kuzenbo packages.
Version 0.0.7 is currently published on npm. These hooks are battle-tested and production-ready.

​
Installation

npm install @kuzenbo/hooks react

​
Available Hooks

​
State Management

useToggle

Toggle between boolean states with convenient methods

useDisclosure

Control open/close state for modals, dropdowns, etc.

useCounter

Counter with increment, decrement, and reset

useListState

Array state with helper methods (append, prepend, remove, etc.)

useMap

Map state with set, delete, and clear methods

useSet

Set state with add, delete, and toggle methods

useSetState

Object state with partial updates (like class components)

useQueue

Queue data structure with enqueue/dequeue

useStateHistory

Track state history with undo/redo

useValidatedState

State with validation rules

useInputState

Simplified input state management

useUncontrolled

Manage controlled/uncontrolled component state

​
Performance & Timing

useDebouncedValue

Debounce a value

useDebouncedState

Debounced state setter

useDebouncedCallback

Debounce a callback function

useThrottledValue

Throttle a value

useThrottledState

Throttled state setter

useThrottledCallback

Throttle a callback function

useTimeout

Execute callback after delay

useInterval

Execute callback on interval

​
DOM & Browser

useClickOutside

Detect clicks outside an element

useEventListener

Attach event listeners safely

useWindowEvent

Attach window event listeners

useResizeObserver

Observe element size changes

useMutationObserver

Observe DOM mutations

useIntersection

Intersection Observer API

useInViewport

Check if element is in viewport

useHover

Track hover state

useFocusWithin

Track focus within an element

useFocusTrap

Trap focus within an element

useScrollIntoView

Scroll element into view

useScrollSpy

Track scroll position for navigation

​
Media & Device

useMediaQuery

Match CSS media queries

useIsMobile

Detect mobile devices

useViewportSize

Track viewport dimensions

useColorScheme

Detect light/dark color scheme

useReducedMotion

Detect prefers-reduced-motion

useOrientation

Track screen orientation

useNetwork

Monitor network status

useOs

Detect operating system

​
User Input

useHotkeys

Register keyboard shortcuts

useMouse

Track mouse position

useMove

Track mouse movement with constraints

useLongPress

Detect long press events

useTextSelection

Track text selection

usePageLeave

Detect when cursor leaves page

​
Storage

useLocalStorage

Sync state with localStorage

useSessionStorage

Sync state with sessionStorage

​
Utilities

useClipboard

Copy to clipboard with status

useIdle

Detect user idle state

useFetch

Fetch data with loading states

useEyeDropper

Color picker from screen

useFullscreen

Control fullscreen mode

useDocumentTitle

Update document title

useFavicon

Update favicon dynamically

useHash

Sync with URL hash

useId

Generate unique IDs (SSR-safe)

useMergedRef

Merge multiple refs

useLogger

Debug component lifecycle

​
Usage Examples

​
State Management

import { useToggle, useDisclosure, useListState } from '@kuzenbo/hooks';

function Example() {
  const [value, toggle] = useToggle(['light', 'dark']);
  const [opened, { open, close, toggle: toggleModal }] = useDisclosure(false);
  const [items, handlers] = useListState(['React', 'Vue']);

  return (
    <>
      <button onClick={() => toggle()}>Theme: {value}</button>
      <button onClick={open}>Open Modal</button>
      <button onClick={() => handlers.append('Angular')}>Add Item</button>
    </>
  );
}

​
Debounce & Throttle

import { useDebouncedValue, useThrottledCallback } from '@kuzenbo/hooks';
import { useState } from 'react';

function Search() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebouncedValue(query, 300);
  const throttledLog = useThrottledCallback(() => console.log('Scrolling'), 1000);

  // debouncedQuery updates 300ms after typing stops
  // throttledLog runs at most once per second

  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}

​
DOM Interactions

import { useClickOutside, useHover, useResizeObserver } from '@kuzenbo/hooks';
import { useRef } from 'react';

function Dropdown() {
  const ref = useRef<HTMLDivElement>(null);
  const { hovered, ref: hoverRef } = useHover();
  
  useClickOutside(ref, () => console.log('Clicked outside'));
  
  const [resizeRef] = useResizeObserver<HTMLDivElement>(({ width, height }) => {
    console.log(`Size: ${width}x${height}`);
  });

  return <div ref={ref}>Dropdown content</div>;
}

​
Keyboard Shortcuts

import { useHotkeys } from '@kuzenbo/hooks';

function Editor() {
  useHotkeys([
    ['mod+s', () => console.log('Save')],
    ['mod+k', () => console.log('Command palette')],
    ['escape', () => console.log('Close')],
  ]);

  return <div>Press Cmd+S to save</div>;
}

​
Media Queries

import { useMediaQuery, useIsMobile, useColorScheme } from '@kuzenbo/hooks';

function ResponsiveComponent() {
  const isMobile = useIsMobile();
  const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1024px)');
  const colorScheme = useColorScheme();

  return (
    <div>
      {isMobile && <MobileView />}
      {isTablet && <TabletView />}
      <p>Color scheme: {colorScheme}</p>
    </div>
  );
}

​
Peer Dependencies

{
  "react": "^19.0.0"
}

​
TypeScript

All hooks are fully typed: 
import { useLocalStorage } from '@kuzenbo/hooks';

interface User {
  id: string;
  name: string;
}

const [user, setUser] = useLocalStorage<User | null>({
  key: 'user',
  defaultValue: null,
});

​
Next Steps

Core Components

Use hooks with Kuzenbo components

Build docs developers (and LLMs) love

Get started for freeTalk to us