← Back to archive

Repo of the Day

juliencrn/usehooks-ts

Published: Dec 8, 2022

Open repository ↗

React hook library, ready to use, written in Typescript.

Summary

usehooks-ts is a React hooks library written in TypeScript that packages common, ready-to-use hooks into a single npm package. The README describes it as minimal and tree-shakable when using the ESM version, so only the imported hooks end up in the final bundle. It is released under the MIT license and targets React and TypeScript projects.

What it is useful for

The library covers routine React tasks that engineers typically re-implement on their own. Hooks documented in the README fall into a few groups:

  • State persistence: useLocalStorage, useSessionStorage, and useReadLocalStorage
  • DOM and viewport observation: useIntersectionObserver, useResizeObserver, useHover, useWindowSize, useScreen, and useMediaQuery
  • User interaction: useOnClickOutside, useClickAnyWhere, useEventListener, and useCopyToClipboard
  • Timing and debouncing: useInterval, useTimeout, useCountdown, useDebounceCallback, and useDebounceValue
  • Convenience state helpers: useBoolean, useToggle, useCounter, useMap, useStep, and useDarkMode / useTernaryDarkMode
  • SSR-aware environment helpers: useIsClient, useIsMounted, and useIsomorphicLayoutEffect

Each hook name in the README links to dedicated documentation on the project's site, and the README states that most hooks are extensively tested and used in production environments.

How engineers can use it

The README documents one install command: npm i usehooks-ts. After that, you import only the hooks you need, for example import { useLocalStorage } from 'usehooks-ts', and call them inside components like any other React hook. The README example shows const [value, setValue] = useLocalStorage('my-localStorage-key', 0).

Because the ESM build is tree-shakable, importing a few hooks does not pull in the rest of the package, which the README describes as making the cost of using it negligible. Engineers working in Next.js or MDX setups (the repository's listed topics) can drop in hooks such as useScript, useScrollLock, or useDocumentTitle without writing the underlying subscription, cleanup, or effect logic themselves.

The README does not list any additional configuration, CLI, or framework-specific setup beyond the install command, so for API specifics on individual hooks, refer to the linked hook pages or the project README.