React ToolsHooks · Components · Utils · Types

115+ production-ready tools for React — fully typed, tree-shakeable, zero extra dependencies.

115+ Hooks

State, lifecycle, performance, events, and 45+ browser-API hooks — useArray, useFetch, useWebSocket, useSpeechRecognition and many more.

Browse Hooks

🧩

8 Components

ErrorBoundary, For, Show, LazyComponent, SwitchCase and their memoized variants.

Browse Components

🛠️

20+ Utils

Pure utility functions for strings, objects, async detection, deep equality and more.

Browse Utils

🔷

Utility Types

Precise TypeScript utility types — NestedKeyOf, ErrorModel, SelectivePartial, DependencyListTyped and more.

Browse Types

🌲

Tree-Shakeable

Import only what you use via sub-path exports. Each hook is independently importable.

⚡

React 16.8+ Compatible

Works with React 16.8 and above. Polyfills included for useId, useDeferredValue and useSyncExternalStore.

Installation

pnpm add @ndriadev/react-tools   # pnpm
npm  i   @ndriadev/react-tools   # npm
yarn add @ndriadev/react-tools   # yarn

Usage

tsx

// Full package
import { useArray, useFetch, Show } from '@ndriadev/react-tools'

// Sub-path imports (better tree-shaking)
import { useArray }    from '@ndriadev/react-tools/hooks/state'
import { useFetch }    from '@ndriadev/react-tools/hooks/api-dom'
import { Show }        from '@ndriadev/react-tools/components'
import { isDeepEqual } from '@ndriadev/react-tools/utils'

ESLint — exhaustive-deps

To validate dependencies in compare-hooks correctly, add:

// eslint.config.js
'react-hooks/exhaustive-deps': ['warn', {
  additionalHooks: '(useMemoCompare|useMemoDeepCompare|useCallbackCompare|useCallbackDeepCompare|useLayoutEffectCompare|useLayoutEffectDeepCompare|useEffectCompare|useEffectDeepCompare)'
}]