gentleduck libs

A collection of reusable React hooks for the @gentelduck/ui component library.

Installation

npm install @gentleduck/hooks
npm install @gentleduck/hooks

Available Hooks

  • use-composed-refs — Merge multiple refs into a single ref.
  • use-computed-timeout-transition — Manage timeout-based transitions.
  • use-debounce — Debounce a value.
  • use-is-mobile — Detect if the user is on a mobile device.
  • use-media-query — Use media queries in your components.
  • use-on-open-change — Handle open/close state changes.
  • use-stable-id — Generate a stable ID.

Usage

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

import { useDebounce } from '@gentleduck/libs/use-debounce';
 
function MyComponent() {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);
 
  return <div>{debouncedValue}</div>;
}
import { useDebounce } from '@gentleduck/libs/use-debounce';
 
function MyComponent() {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);
 
  return <div>{debouncedValue}</div>;
}
Gentleduck LibsGentleduck Ttest