usehooks-ts

usehooks-ts is an open-source React hook library written in TypeScript that gives developers a set of ready-to-use hooks for common state management and browser API tasks. It is created by Julien Caron and maintained by a team of over 250 contributors, and is distributed as an npm package under the MIT License.

What is usehooks-ts?

usehooks-ts is a React hook library written in TypeScript, installable via npm with npm i usehooks-ts. It provides a collection of hooks covering state management (such as useBoolean, useCounter, useToggle), browser APIs (such as useLocalStorage, useSessionStorage, useMediaQuery, useDarkMode), and DOM utilities (such as useHover, useIntersectionObserver, useOnClickOutside). The library follows the DRY (Don't Repeat Yourself) principle so developers can reuse well-tested logic instead of writing it from scratch.

The library is designed to be minimal and fully tree-shakable when using the ESM version, meaning only the hooks you actually import are included in your final bundle. This keeps the performance cost of adding the library negligible, which is especially important for production React applications.

Key Features

• Tree-shakable ESM build — When consuming the ESM version, unused hooks are automatically removed from the bundle, so import only what you need and keep the overhead near zero.
• TypeScript-native — The entire library is written in TypeScript, giving consumers full type inference and editor IntelliSense out of the box.
• Over 30 ready-to-use hooks — The collection includes hooks for state (useBoolean, useCounter, useMap, useStep), storage (useLocalStorage, useSessionStorage, useReadLocalStorage), DOM events (useEventListener, useClickAnyWhere, useHover), timers (useInterval, useTimeout, useCountdown), and more.
• Browser API wrappers — Hooks like useMediaQuery (Match Media API), useCopyToClipboard (Clipboard API), useIntersectionObserver (Intersection Observer API), and useResizeObserver (ResizeObserver API) abstract complex browser features into simple React hooks.
• Server-side rendering aware — useIsomorphicLayoutEffect automatically selects between useLayoutEffect and useEffect depending on the environment, while useIsClient and useIsMounted help avoid hydration mismatches.
• Dark mode utilities — useDarkMode returns the current dark mode state, and useTernaryDarkMode supports system/dark/light modes with localStorage persistence.
• Production-tested — Most hooks are extensively tested and are being used in production environments, as stated in the project documentation.

Who is it for?

• React developers who want to avoid re-implementing common hooks for state persistence, media queries, clipboard operations, and dark mode, and prefer a type-safe, tree-shakable library.
• Frontend engineers working on client-side apps that need to manage browser APIs without worrying about SSR compatibility.
• Open-source maintainers looking for a lightweight dependency with permissive licensing (MIT) and an active contributor community.

What can you do with usehooks-ts?

• Persist user preferences: Use useLocalStorage or useSessionStorage to save a value across page reloads, reading it back with useReadLocalStorage if you only need the value.
• Track viewport and element states: useWindowSize reports window dimensions, useMediaQuery listens to a CSS media query string, and useIntersectionObserver observes when an element enters the viewport.
• Implement dark mode: useDarkMode manages the current theme, and useTernaryDarkMode extends it to support system, dark, and light preferences with persistent storage.
• Handle delays and events: useDebounceCallback creates a debounced callback, useInterval and useTimeout wrap the corresponding timer APIs, and useEventListener attaches listeners to DOM elements or the window.

FAQ

Is usehooks-ts free?

Yes, usehooks-ts is open-source and released under the MIT License, so you can use it in commercial and personal projects without licensing fees.

How do I install usehooks-ts?

Run npm i usehooks-ts in your project. The package is available on npm and includes both CommonJS and ESM builds.

Does usehooks-ts support server-side rendering?

The library includes hooks that respect the rendering environment. useIsomorphicLayoutEffect picks the correct effect implementation, and useIsClient lets you defer client-only logic until hydration is complete.

Which hooks does usehooks-ts include?

It includes more than 30 hooks, such as useBoolean, useCounter, useDarkMode, useDebounceCallback, useLocalStorage, useSessionStorage, useMediaQuery, useWindowSize, useCopyToClipboard, and useIntersectionObserver. The full list is available on the project's documentation site, usehooks-ts.com.

Does it work with React Native?

The README does not mention React Native support; the library targets web APIs like window, document, localStorage, and matchMedia, so it is primarily designed for web React applications.