usehooks-ts

library3.1.1jsnpmunverified

usehooks-ts is a comprehensive, TypeScript-first React hook library designed to accelerate application development by providing a collection of ready-to-use, well-tested custom hooks. As of its current stable version, 3.1.1, the library maintains an active development pace with frequent patch and minor releases, alongside significant major updates like the recent v3.0.0. Key differentiators include its strict adherence to TypeScript, ensuring type safety and improved developer experience, and its focus on being fully tree-shakable (utilizing ES Modules since v3) to minimize bundle size. It aims to embody DRY principles, offering solutions for common React patterns such as state management, DOM manipulation, event handling, and more, making it a robust choice for modern React projects.

web-framework type-stubs

npm install usehooks-ts

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · USEHOOKS-TS

usehooks-ts

web-frameworkjavascriptv3.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useLocalStorage

✓ import { useLocalStorage } from 'usehooks-ts'

✗ const useLocalStorage = require('usehooks-ts').useLocalStorage

The library transitioned to ES Modules in v3.0.0, making CommonJS require statements incorrect.

useBoolean

✓ import { useBoolean } from 'usehooks-ts'

✗ import useBoolean from 'usehooks-ts/useBoolean'

All hooks are named exports from the main package entry point.

useDocumentTitle

✓ import { useDocumentTitle } from 'usehooks-ts'

✗ import * as usehooks from 'usehooks-ts'

While star imports work, it's generally recommended to import only the specific hooks you need for optimal tree-shaking.

Demonstrates the basic usage of `useLocalStorage` to persist and manage a counter across browser sessions.

import React from 'react'; import { useLocalStorage } from 'usehooks-ts'; function MyComponent() { // Initialize a piece of state in localStorage with a default value of 0 const [count, setCount] = useLocalStorage('my-counter-key', 0); const increment = () => setCount(prev => prev + 1); const decrement = () => setCount(prev => prev - 1); const reset = () => setCount(0); return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> <button onClick={reset}>Reset</button> </div> ); } export default MyComponent;

Debug

Known issues

breakingVersion 3.0.0 of `usehooks-ts` moved its entire workspace to ES Modules. This means direct CommonJS `require()` statements will no longer work, requiring projects to update their import syntax to ES Module standards.

fix

Migrate all `require()` statements to `import { HookName } from 'usehooks-ts'` syntax.

affects: >=3.0.0

breakingIn version 3.0.0, several previously deprecated hooks and their signatures were completely removed. Projects upgrading from versions prior to 3.0.0 might encounter runtime errors if these hooks are still in use.

fix

Review release notes for v3.0.0 and update code to use recommended alternatives (e.g., `useScrollLock` instead of `useLockedBody`) or implement custom solutions.

affects: >=3.0.0

breakingVersion 3.0.0 introduced changes preferring `type` over `interface` for some internal types and renamed or made private certain type aliases. This may cause TypeScript compilation errors in applications that directly reference or extend `usehooks-ts` internal types.

fix

Adjust TypeScript code to align with the new type definitions. Consult the `usehooks-ts` documentation or source for updated type names and structures.

affects: >=3.0.0

deprecatedSeveral hooks have been deprecated in recent minor versions, with some replaced by new alternatives. For example, `useLockedBody` was replaced by `useScrollLock` (v2.15.0), and `useFetch`, `useEffectOnce`, `useIsFirstRender`, and `useUpdateEffect` were deprecated in v2.14.0.

fix

Consult the official `usehooks-ts` documentation for recommended modern alternatives and migrate your codebase accordingly to avoid future breaking changes.

affects: >=2.13.0

gotchaWhile version 3.1.1 officially adds React 19 to its `peerDependencies`, users on older versions of `usehooks-ts` might encounter peer dependency warnings or potential compatibility issues when using React 19.

fix

Upgrade to `usehooks-ts@3.1.1` or later to ensure full `peerDependencies` compatibility with React 19. For older versions, ensure your React version is within the specified peer dependency range.

affects: <3.1.1

Errors

Common errors & fixes

TypeError: require is not a function

Attempting to import `usehooks-ts` modules using CommonJS `require()` syntax after the library migrated to ES Modules in v3.0.0.

fix

Update your import statements to use ES Module syntax: `import { HookName } from 'usehooks-ts'`.

Property 'useDeprecatedHookName' does not exist on type 'typeof import("usehooks-ts")'.

Trying to use a hook that was explicitly removed in `usehooks-ts` v3.0.0 or a later version after being deprecated.

fix

Refer to the `usehooks-ts` documentation to identify the recommended replacement hook (e.g., `useScrollLock` for `useLockedBody`) or implement the desired functionality manually.

Type 'MyComponentProps' is not assignable to type 'HookParameterType'. Argument of type 'string' is not assignable to parameter of type 'number'.

This usually indicates a type mismatch in arguments passed to hooks, often exacerbated by the library's TypeScript-first approach and strict typing, or changes to internal type aliases in v3.0.0.

fix

Carefully review the type signature of the hook you are using in the `usehooks-ts` documentation. Ensure the values and types you are passing as arguments exactly match the expected types.

Upgrade

Version history

3.1.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for all React applications using hooks.

Agent activity

35 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/juliencrn/usehooks-ts ↗

packagehttps://www.npmjs.com/package/usehooks-ts ↗

homepagehttps://usehooks-ts.com ↗