@ducor/hooks/README.md

A collection of useful React hooks for building modern web applications. Includes hooks for clipboard operations, window events, intervals, timeouts, and more.

# @ducor/hooks

A collection of useful React hooks for building modern web applications.

## Installation

```bash
npm install @ducor/hooks
# or
yarn add @ducor/hooks
# or
pnpm add @ducor/hooks
```

## Available Hooks

| Hook | Description | Documentation |
|------|-------------|---------------|
| `useBoolean` | Boolean state management with toggle methods | [Documentation](./docs/use-boolean.md) |
| `useClipboard` | Copy text to clipboard with success/error handling | [Documentation](./docs/use-clipboard.md) |
| `useElementSize` | Track element size using ResizeObserver | [Documentation](./docs/use-element-size.md) |
| `useFullscreen` | Manage fullscreen mode of an element | [Documentation](./docs/use-fullscreen.md) |
| `useHover` | Track hover state of an element | [Documentation](./docs/use-hover.md) |
| `useIdle` | Detect when the user is idle | [Documentation](./docs/use-idle.md) |
| `useOutsideClick` | Detect clicks outside of a specified element | [Documentation](./docs/use-outside-click.md) |
| `usePlacement` | Manage element placement and positioning | [Documentation](./docs/use-placement.md) |
| `useProcessing` | Manage loading/processing state | [Documentation](./docs/use-processing.md) |
| `useTimeout` | Manage timeouts with automatic cleanup | [Documentation](./docs/use-time-out.md) |
| `useUUID` | Generate unique identifiers (UUIDs) | [Documentation](./docs/use-uuid.md) |
| `useWindowEvent` | Manage window event listeners | [Documentation](./docs/use-window-event.md) |

## Quick Examples

### useBoolean

```typescript
import { useBoolean } from '@ducor/hooks';

function ToggleComponent() {
  const [isOpen, { toggle, on, off }] = useBoolean(false);

  return (
    <div>
      <button onClick={toggle}>Toggle</button>
      <button onClick={on}>Open</button>
      <button onClick={off}>Close</button>
      <div>{isOpen ? 'Open' : 'Closed'}</div>
    </div>
  );
}
```

### useClipboard

```typescript
import { useClipboard } from '@ducor/hooks';

function CopyButton({ text }: { text: string }) {
  const { copy, copied, error } = useClipboard();

  return (
    <button onClick={() => copy(text)}>
      {copied ? 'Copied!' : 'Copy'}
      {error && <span className="error">{error.message}</span>}
    </button>
  );
}
```

### useElementSize

```typescript
import { useElementSize } from '@ducor/hooks';

function ResizableComponent() {
  const { ref, width, height } = useElementSize();

  return (
    <div ref={ref}>
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
    </div>
  );
}
```

## Documentation

For detailed documentation on each hook, please refer to the [docs](./docs) directory:

- [useBoolean](./docs/use-boolean.md) - Boolean state management
- [useClipboard](./docs/use-clipboard.md) - Clipboard operations
- [useElementSize](./docs/use-element-size.md) - Element size tracking
- [useFullscreen](./docs/use-fullscreen.md) - Fullscreen mode management
- [useHover](./docs/use-hover.md) - Hover state tracking
- [useIdle](./docs/use-idle.md) - User idle detection
- [useOutsideClick](./docs/use-outside-click.md) - Outside click detection
- [usePlacement](./docs/use-placement.md) - Element placement
- [useProcessing](./docs/use-processing.md) - Loading state management
- [useTimeout](./docs/use-time-out.md) - Timeout management
- [useUUID](./docs/use-uuid.md) - UUID generation
- [useWindowEvent](./docs/use-window-event.md) - Window event management

## Contributing

Please read [CONTRIBUTING.md](../CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.

## License

This project is licensed under the MIT License - see the [LICENSE](../LICENSE) file for details.