Hooks

The @foundrykit/hooks package provides a collection of custom React hooks that encapsulate common functionality and patterns used across applications.

Features

• Reusable logic: Encapsulate complex logic into reusable hooks
• TypeScript support: Full TypeScript support with proper type definitions
• Performance optimized: Hooks are optimized for performance and avoid unnecessary re-renders
• Well tested: All hooks are thoroughly tested and documented

Installation

pnpm add @foundrykit/hooks

Usage

import { useLocalStorage } from '@foundrykit/hooks'

function MyComponent() {
  const [value, setValue] = useLocalStorage('my-key', 'default-value')
  
  return (
    <div>
      <p>Stored value: {value}</p>
      <button onClick={() => setValue('new-value')}>
        Update Value
      </button>
    </div>
  )
}

Available Hooks

State Management

• useLocalStorage - Persist state in localStorage
• useSessionStorage - Persist state in sessionStorage
• useToggle - Toggle boolean state
• useCounter - Counter with increment/decrement functions

UI Interactions

• useClickOutside - Detect clicks outside an element
• useHover - Track hover state of an element
• useFocus - Track focus state of an element
• useKeyboard - Handle keyboard events

Data Fetching

• useFetch - Simple data fetching hook
• useAsync - Handle async operations with loading states
• useDebounce - Debounce values and callbacks

Browser APIs

• useMediaQuery - React to media query changes
• useWindowSize - Track window dimensions
• useScrollPosition - Track scroll position
• useOnline - Track online/offline status

Form Hooks

• useForm - Form state management
• useField - Individual field management
• useValidation - Form validation logic

Package Structure

The hooks package is organized as follows:

Hook Categories

State Hooks

Hooks for managing component and application state.

Effect Hooks

Hooks for handling side effects and lifecycle events.

Utility Hooks

Hooks for common utility functions and patterns.

Browser Hooks

Hooks for interacting with browser APIs and events.

Best Practices

• Customize hooks: Most hooks accept configuration options for customization
• Combine hooks: Hooks can be combined to create more complex functionality
• Error handling: Hooks include proper error handling and fallbacks
• Performance: Hooks are optimized to prevent unnecessary re-renders

Dependencies

• React 19+
• TypeScript for type definitions
• No external dependencies for most hooks