gentleduck/hooks

Philosophy

Hooks are the glue between React's render cycle and the real world — browser APIs, external state, user interactions. Rather than scattering custom hooks across components, gentleduck/hooks centralizes them as tested, typed utilities. Each hook solves one problem (media queries, local storage, intersection observer) and composes with others.

Installation

npm install @gentleduck/hooks

npm install @gentleduck/hooks

Available Hooks

• use-composed-refs — Merge multiple refs into a single ref. Also exports a composeRefs utility function.
• use-computed-timeout-transition — Compute an element's CSS transition duration and run a callback after it completes.
• use-copy-to-clipboard — Copy text to the clipboard with a configurable reset timeout.
• use-debounce — Debounce a callback function. Also exports a standalone debounce utility function.
• use-is-mobile — Detect if the viewport is below 768px.
• use-media-query — Subscribe to a CSS media query and get a boolean match result.
• use-on-open-change — Manage open/close state with scroll locking and CSS transition awareness.
• use-stable-id — Generate a stable, incrementing ID with an optional prefix.

Usage

To use a hook, import it from the corresponding directory:

import { useDebounce } from '@gentleduck/hooks/use-debounce';
 
function MyComponent() {
  const [value, setValue] = useState('');
  const debouncedSearch = useDebounce((query: string) => {
    console.log('Searching for:', query);
  }, 500);
 
  return <input onChange={(e) => debouncedSearch(e.target.value)} />;
}

import { useDebounce } from '@gentleduck/hooks/use-debounce';
 
function MyComponent() {
  const [value, setValue] = useState('');
  const debouncedSearch = useDebounce((query: string) => {
    console.log('Searching for:', query);
  }, 500);
 
  return <input onChange={(e) => debouncedSearch(e.target.value)} />;
}