Reusable, type-safe React hooks used across Sonar Digital projects. Small, focused utilities with sensible APIs and first-class TypeScript support.
npm install @sonardigital/hooksReusable, type-safe React hooks used across Sonar Digital projects. Small, focused utilities with sensible APIs and first-class TypeScript support.
- Typed: Strong TypeScript types out of the box
- Focused: A handful of well-tested, practical hooks
- Lightweight: Minimal footprint and simple APIs
``bash`
npm install @sonardigital/hooks
`bash`
yarn add @sonardigital/hooks
`bash`
pnpm add @sonardigital/hooks
`tsx
import { useDebounce, useScrollToTop, useStopwatch, useTimeout, useBrowserPageTitle } from '@sonardigital/hooks';
function Example({ search }: { search: string }) {
const debounced = useDebounce(search, 400);
useBrowserPageTitle(Searching: ${debounced || 'Idle'});
return null;
}
`
Debounce any changing value and optionally run a callback when the debounced value updates.
`ts`
const debouncedValue = useDebounce
- value: value to debounce
- delay: milliseconds to wait (default: 500)
- callback: called with the latest debounced value after the delay
Example:
`tsx`
const [query, setQuery] = useState('');
const debouncedQuery = useDebounce(query, 300, (v) => {
// fire search with v
});
Scrolls the window to the top whenever the provided dependencies change.
`ts`
useScrollToTop({ deps?: React.DependencyList })
Example with React Router:
`tsx
import { useLocation } from 'react-router-dom';
const { pathname } = useLocation();
useScrollToTop({ deps: [pathname] });
`
Simple stopwatch that counts time elapsed since a given date (or now if omitted).
`ts`
const { time, days, hours, minutes, seconds } = useStopwatch(date?: string)
- time: { days, hours, minutes, seconds, raw }
- days/hours/minutes/seconds: zero-padded strings for display
Example:
`tsx`
const { days, hours, minutes, seconds } = useStopwatch('2024-01-01T00:00:00Z');
Countdown timer to a target dayjs date. Updates every second.
`ts`
const { timeLeft } = useTimeout({ date: Dayjs })
- timeLeft: { days, hours, minutes, seconds, expired }
Example:
`tsx
import dayjs from 'dayjs';
const { timeLeft } = useTimeout({ date: dayjs().add(10, 'minute') });
`
Sets the browser tab title while the component is mounted and restores the previous title on unmount.
`ts`
useBrowserPageTitle(title: string)
All hooks are fully typed. Generics are inferred where appropriate (e.g., useDebounce).
- React 18+
- TypeScript 5+
`bash`
npm install
npm run lint
npm run format
npm run precommit
ISC
- dayjs for time utilities used by useStopwatch and useTimeout`