name: hook description: | Create custom React hooks following Darkroom standards. Use when: - User says "create hook", "new hook", "custom hook" - User wants to extract logic into a reusable hook - User mentions "use" prefix like "useAuth", "useScroll" argument-hint: "[hookName]"

Create Custom Hook

Create a custom React hook following Darkroom conventions.

Structure

code

lib/hooks/<name>.ts    # Hook implementation

Template

tsx

'use client'

import { useState, useEffect } from 'react'

interface Use<Name>Options {
  // Hook configuration options
}

interface Use<Name>Return {
  // Return type definition
}

export function use<Name>(options?: Use<Name>Options): Use<Name>Return {
  // Implementation

  return {
    // Return values
  }
}

Conventions

•Always 'use client' - Hooks use React APIs that require client
•Type everything - Options interface, return interface
•Named export - export function useX, not default
•Prefix with use - React hook naming convention
•No memoization - React Compiler handles it automatically

Consider Using Hamo

For common use cases, prefer hamo hooks:

tsx

import { useWindowSize, useRect, useIntersectionObserver } from 'hamo'

Only create custom hooks when hamo doesn't cover the use case.

Example

code

User: "create a useLocalStorage hook"
→ Creates lib/hooks/use-local-storage.ts

Arguments

•$ARGUMENTS - Hook name (e.g., "useAuth", "useLocalStorage")