Project Description

Every React project I work on ends up needing the same utilities: debouncing, local storage sync, click outside detection, media queries, and more. Instead of copying code between projects or installing multiple small packages, I created a centralized repository of hooks I can reuse everywhere.

This library is my personal toolkit that I’ve refined through multiple projects, ensuring each hook is well-tested, properly typed, and follows React best practices.

Features

• Over 20 hooks covering common use cases
• Zero dependencies - only React as peer dependency
• Full TypeScript support with proper type inference
• Tree-shakeable - only import what you need
• SSR compatible - safe for Next.js and other SSR frameworks
• Fully tested with complete test coverage

Installation

1
npm install @qazuor/react-hooks
2
# or
3
pnpm add @qazuor/react-hooks
4
# or
5
yarn add @qazuor/react-hooks

Available Hooks

State Management

• useBoolean - Boolean state with setTrue, setFalse, toggle methods
• useToggle - Toggleable state with optional persistence
• useQueue - FIFO queue with enqueue, dequeue operations

Side Effects

• useTimeout - Delayed callback execution with start, stop, reset
• useInterval - Recurring callbacks with pause/resume functionality
• useHandledInterval - Enhanced interval with random delay support
• useDebounce - Debouncing values with configurable delay

Browser APIs

• useLocalStorage - Persistent state synced with localStorage
• useSessionStorage - Session storage management
• useCopyToClipboard - Clipboard read/write utilities
• useMediaQuery - Reactive media query matching
• useNetworkState - Network connectivity detection
• useVisibilityChange - Document visibility monitoring
• useWindowWidth - Window dimensions tracking

User Interaction

• useClickOutside - Detect clicks outside an element
• useIdleness - Monitor user activity/inactivity
• usePageLeave - Detect when user leaves the page
• useLockBodyScroll - Prevent body scroll (modals, overlays)
• useMeasure - Element dimensions via ResizeObserver

Development

• useLogger - Development logging with lifecycle tracking

Usage Example

1
import {
2
  useLocalStorage,
3
  useDebounce,
4
  useClickOutside,
5
} from '@qazuor/react-hooks';
6

7
function SearchDropdown() {
8
  const [query, setQuery] = useLocalStorage('search-query', '');
9
  const debouncedQuery = useDebounce(query, 300);
10
  const dropdownRef = useClickOutside<HTMLDivElement>(() => {
11
    setIsOpen(false);
12
  });
13

14
  useEffect(() => {
15
    if (debouncedQuery) {
16
      fetchResults(debouncedQuery);
17
    }
18
  }, [debouncedQuery]);
19

20
  return (
21
    <div ref={dropdownRef}>
22
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
23
      {/* Results dropdown */}
24
    </div>
25
  );
26
}

Technical Details

Requirements

• React 18.2+
• TypeScript 4.9+ (for TypeScript users)

Bundle Size

Each hook is independently importable, so you only include what you use in your bundle. The entire library is under 5KB gzipped.