Skip to main content

​
Introduction

The @zayne-labs/toolkit-react package provides a rich set of React hooks, utilities, and Zustand integrations designed to simplify common patterns in React development.

​
Installation

npm install @zayne-labs/toolkit-react
This package requires React 19.0.0 or higher as a peer dependency.

​
Package Structure

The package is organized into three main modules:

​
Hooks (Main Export)

Import hooks from the main package entry: 
import { useToggle, useDisclosure, useDebounce } from '@zayne-labs/toolkit-react';

​
Utilities

Import utilities from the /utils subpath: 
import { composeRefs, composeEventHandlers, mergeProps } from '@zayne-labs/toolkit-react/utils';

​
Zustand Integrations

Import Zustand helpers from the /zustand subpath: 
import { createReactStore, createReactStoreContext } from '@zayne-labs/toolkit-react/zustand';

​
Key Features

State Management Hooks

useToggle, useDisclosure, useControllable, and more for managing component state

Performance Hooks

useDebounce, useThrottle variants for optimizing event handlers and state updates

Storage Hooks

useStorageState for seamless localStorage/sessionStorage integration with React

Effect Utilities

useMountEffect, useEffectOnce, useAsyncEffect for lifecycle management

​
Categories

​
State Hooks

  • useToggle - Boolean state toggle
  • useDisclosure - Modal/drawer state with scroll control
  • useControllableState - Controlled/uncontrolled component pattern
  • useStorageState - Synced storage state
  • useSearchParams - URL search params management

​
Performance Hooks

  • useDebouncedFn / useDebouncedState - Debounced callbacks and state
  • useThrottleByTimeout / useThrottleByTimer / useThrottleByFrame - Throttled callbacks
  • useCallbackRef - Stable callback reference

​
Effect Hooks

  • useMountEffect - Run effect on mount only
  • useUnmountEffect - Run cleanup on unmount
  • useEffectOnce - Run effect exactly once (strict mode safe)
  • useAsyncEffect - Async effect handling
  • useAfterMountEffect - Run effect after initial mount
  • useLifeCycle - Complete lifecycle hook

​
Browser API Hooks

  • useClickOutside - Detect clicks outside elements
  • useCopyToClipboard - Clipboard API integration
  • useIsHydrated - SSR hydration detection
  • useScrollObserver - Scroll event observation

​
Advanced Hooks

  • createCustomContext - Type-safe context creation
  • useComposeRefs - Combine multiple refs
  • useConstant - Lazy initialization
  • useStore - External store subscription

​
Next Steps

Explore Hooks

Browse all available hooks with examples

Utilities

Learn about React utilities and helpers

Zustand Integration

Integrate with Zustand state management

Build docs developers (and LLMs) love

Get started for freeTalk to us