A collection of useful React hooks for building modern web applications. Includes hooks for clipboard operations, window events, intervals, timeouts, and more.
npm install @ducor/hooksbash
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
$3
`typescript
import { useBoolean } from '@ducor/hooks';
function ToggleComponent() {
const [isOpen, { toggle, on, off }] = useBoolean(false);
return (
{isOpen ? 'Open' : 'Closed'}
);
}
`
$3
`typescript
import { useClipboard } from '@ducor/hooks';
function CopyButton({ text }: { text: string }) {
const { copy, copied, error } = useClipboard();
return (
);
}
`
$3
`typescript
import { useElementSize } from '@ducor/hooks';
function ResizableComponent() {
const { ref, width, height } = useElementSize();
return (
Width: {width}px
Height: {height}px
);
}
``