@ducor/hooks

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

Installation

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 | | useClipboard | Copy text to clipboard with success/error handling | Documentation | | useElementSize | Track element size using ResizeObserver | Documentation | | useFullscreen | Manage fullscreen mode of an element | Documentation | | useHover | Track hover state of an element | Documentation | | useIdle | Detect when the user is idle | Documentation | | useOutsideClick | Detect clicks outside of a specified element | Documentation | | usePlacement | Manage element placement and positioning | Documentation | | useProcessing | Manage loading/processing state | Documentation | | useTimeout | Manage timeouts with automatic cleanup | Documentation | | useUUID | Generate unique identifiers (UUIDs) | Documentation | | useWindowEvent | Manage window event listeners | Documentation |

Quick Examples

useBoolean

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

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

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 directory:

• useBoolean - Boolean state management
• useClipboard - Clipboard operations
• useElementSize - Element size tracking
• useFullscreen - Fullscreen mode management
• useHover - Hover state tracking
• useIdle - User idle detection
• useOutsideClick - Outside click detection
• usePlacement - Element placement
• useProcessing - Loading state management
• useTimeout - Timeout management
• useUUID - UUID generation
• useWindowEvent - Window event management

Contributing

Please read 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 file for details.