ducorui
@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/hooksAvailable 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.