gentleduck libs

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