A collection of reusable and type-safe React hooks to simplify your development workflow.
npm install react-hookman###### Generated by AI
``bash`
npm install react-hookman
`bash`
yarn add react-hookman
---
---
A hook for managing boolean state with utility functions.
(optional) – Initial state, defaults to falseReturns
- : Current boolean state
- setValue(value: boolean): Sets the state to a specific value
- setTrue(): Sets the state to true
- : Sets the state to false
- : Toggles the current state🔧 Usage
`tsx
const { value, setTrue, setFalse, toggle } = useBoolean(false);
return (
useBoolean Hook Demo
Current value: {value.toString()}
{value && (
marginTop: "20px",
padding: "20px",
backgroundColor: "#e0e0e0",
}}
>
This content is visible when value is true!
)}
🎯 useClickOutside 🖱️
React hook that detects clicks outside a specified element and triggers a callback.
Parameters
- - Reference to the target HTML element
- cb: () => void - Callback function triggered on outside clicksReturns
- voidType Parameters
- - Type of the referenced HTML elementNotes
- Automatically cleans up event listeners on unmount
- Attaches to mousedown event on document
- Safe to use with null refs🔧 Usage
`tsx
const Modal: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);
const modalRef = useRef(null); useClickOutside(modalRef as React.RefObject, () =>
setIsOpen(false)
);
return (
{isOpen && (
position: "fixed",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
padding: "20px",
background: "white",
boxShadow: "0px 4px 10px rgba(0,0,0,0.1)",
borderRadius: "8px",
}}
ref={modalRef}
>
This is a modal. Click outside to close.
)}
📋
HookA React hook for copying text to the clipboard with both Clipboard API and fallback support. It also provides a
copied state to track copy status.---
Returns
- copied: boolean - Indicates if text was recently copied
- copyToClipboard(text: string): Promise - Copies text to clipboardFeatures
- Uses modern Clipboard API with fallback
- Auto-resets copy status after 2 seconds
- Handles errors gracefully
- Works in all modern browsersNotes
- Copy status resets automatically after 2000ms
- Falls back to execCommand if Clipboard API unavailable
- Logs errors to console if copy fails
🔧 Usage
`tsx
import React, { useState } from "react";
import { useClipboard } from "./useClipboard";const ClipboardExample: React.FC = () => {
const { copied, copyToClipboard } = useClipboard();
const [text, setText] = useState("Hello, World!");
return (
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Enter text to copy"
/>
);
};export default ClipboardExample;
`⏳
HookA React hook for debouncing values. It delays updating the state until after a specified time has passed since the last change.
---
🔧 Usage
`tsx
import React, { useState } from "react";
import { useDebounce } from "./useDebounce";const DebounceExample: React.FC = () => {
const [text, setText] = useState("");
const debouncedText = useDebounce(text, 500);
return (
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Type something..."
/>
Debounced Value: {debouncedText}
);
};export default DebounceExample;
`🛠 API
Returns the debounced value after the specified delay.
| Parameter | Type | Default | Description |
| --------- | ------ | ------- | ---------------------------------------------- |
| value | T | — | The value to debounce. |
| delay | number | 500 | The debounce delay in milliseconds (optional). |
🛑
HookA React hook that runs a cleanup function when a component unmounts. Useful for handling cleanup logic like removing event listeners, aborting requests, or clearing intervals.
---
🔧 Usage
`tsx
import React, { useState } from "react";
import { useDestroy } from "./useDestroy";const DestroyExample: React.FC = () => {
const [visible, setVisible] = useState(true);
return (
{visible &&
);
};const ChildComponent: React.FC = () => {
useDestroy(() => {
console.log("Component unmounted! Cleanup logic here.");
});
return
This component will trigger cleanup on unmount.
;
};export default DestroyExample;
`🛠 API
Runs the provided function when the component unmounts.
| Parameter | Type | Description |
| --------- | ---------- | --------------------------------------------------- |
| func | () => void | The function to execute when the component unmounts |
🔄 useDragAndDrop 🖱️
React hook for adding drag and drop functionality to elements.
Usage
typescript
function App() {
const [ref, isDragging] = useDragAndDrop(); // Explicitly type the ref return (
style={{
position: "absolute",
backgroundColor: "lightblue",
padding: "10px",
cursor: isDragging ? "grabbing" : "grab",
}}
>
Drag me!
`
- Reference to attach to draggable element
- isDragging: boolean - Current drag stateType Parameters
- T extends HTMLElement - Type of the draggable elementNotes
- Element must have position: absolute style
- Handles mouse events automatically
- Cleans up event listeners on unmount
- Updates element position in real-time
- Tracks offset from click position🌐
useFetch HookA custom React hook for fetching data asynchronously with built-in support for loading state, error handling, retries, and aborting requests.
---
🚀 Installation
This is a standalone hook. You can directly copy and use it in your React project.
---
🔧 Usage
`tsx
import React, { useState } from "react";
import { useFetch } from "./useFetch";const FetchExample: React.FC = () => {
const [url, setUrl] = useState(
"https://jsonplaceholder.typicode.com/posts/1"
);
const { data, loading, error, retry } = useFetch<{
title: string;
body: string;
}>(url);
return (
Fetch Example
{loading && Loading...
}
{error && Error: {error.message}
}
{data && (
{data.title}
{data.body}
)}
>
Fetch Another Post
);
};export default FetchExample;
`🛠 API
$3
#### Parameters
| Parameter | Type | Description |
| --------- | ------------ | ------------------------------------------------- |
| url | string | The API endpoint to fetch data from |
| options | FetchOptions | Fetch configuration (headers, method, body, etc.) |
#### FetchOptions (Extends RequestInit)
| Option | Type | Default | Description |
| ------- | ------- | ------- | -------------------------------- |
| enabled | boolean | true | If false, prevents auto-fetching |
#### Return Values
| Property | Type | Description |
| -------- | ------------- | ----------------------------------------- |
| data | T \| null | The fetched data. Defaults to null |
| loading | boolean | true while fetching, false when complete |
| error | Error \| null | Contains error details if the fetch fails |
| retry | () => void | A function to manually retry the request |
🖱️
HookA custom React hook that detects whether an element is being hovered over. It returns a boolean value indicating the hover state.
---
🔧 Usage
`tsx
import { useRef } from "react";
import { useHover } from "./useHover";function Component() {
const ref = useRef(null);
const isHovered = useHover(ref);
return (
style={{ backgroundColor: isHovered ? "lightblue" : "white" }}
>
Hover over me!
🛠 API
$3
#### Parameters
| Parameter | Type | Description |
| --------- | ------------ | ----------- | ---------------------------------------------- |
| ref | RefObject | null | A React ref object pointing to an HTMLElement. |
#### Return Value
| Type | Description |
|---------------|------------------------------------------------------|
|
| true if the element is hovered, false otherwise. |
| Type Parameters | T extends HTMLElement \| null: The type of element the ref refers to (automatically inferred). |⌛ useIdle 💤
React hook that detects user inactivity after a specified timeout.
Parameters
- timeout: number - Inactivity duration in milliseconds (default: 30000)Returns
- isIdle: boolean - Current idle stateFeatures
- Monitors common user interactions:
- Mouse movement
- Keyboard activity
- Scrolling
- Clicks
- Touch events
- Automatically resets timer on activity
- Safe for server-side rendering
- Cleans up listeners on unmountUsage
`typescript
function App() {
const isIdle = useIdle(10000); // return (
{isIdle ? "System idle ⏳" : "Active 💻"}
);
`
👆 useLongPress 🕒
React hook for detecting long press interactions on elements, supporting both mouse and touch events.
Parameters
-
- Function called when long press is detected
- options: LongPressOptions - Configuration options object$3
`typescript
interface LongPressOptions {
threshold?: number; // Duration before triggering (ms), default: 400
moveThreshold?: number; // Maximum movement allowed (px), default: 10
preventDefault?: boolean; // Prevent default events, default: true
disabled?: boolean; // Disable the hook, default: false
onStart?: (event: PressEvent, position: Position) => void;
onFinish?: (event: PressEvent, position: Position, duration: number) => void;
onCancel?: (event: PressEvent, position: Position) => void;
onMove?: (event: PressEvent, position: Position) => void;
}
`Returns
Object containing event handlers to spread onto the target element:
typescript
interface LongPressHandlers {
onMouseDown: (event: React.MouseEvent) => void;
onMouseUp: (event: React.MouseEvent) => void;
onMouseLeave: (event: React.MouseEvent) => void;
onMouseMove: (event: React.MouseEvent) => void;
onTouchStart: (event: React.TouchEvent) => void;
onTouchEnd: (event: React.TouchEvent) => void;
onTouchMove: (event: React.TouchEvent) => void;
}
`
Features
- 🖱️ Supports both mouse and touch events
- 📏 Configurable movement threshold
- ⏱️ Adjustable timing threshold
- 🚫 Cancel on movement exceeding threshold
- 📍 Provides position information
- ♿ Accessibility through event prevention control
- 🔄 Lifecycle callbacks for press states
Notes
- Long press is triggered after holding for the specified threshold duration
- Cancels if movement exceeds moveThreshold
- Provides position coordinates for all events
- Cleans up timers automatically
- Can be disabled dynamically
- Supports custom callbacks for different press states
📱 useMobile 📊
React hook for detecting mobile viewport width with debounced updates.
Returns
- - true if viewport width is less than 768px (mobile breakpoint)Usage
`typescript
function App() {
const isMobile = useMobile(); return (
{isMobile ? "Mobile View!" : "Desktop View!"}
);
}
`
🖱️ useMousePosition 📍
React hook for tracking mouse position globally and relative to a specific element.
Returns
- - Object containing all position coordinates
- ref: React.Ref - Reference to attach to tracked element
Position Object
`typescript
interface Position {
x: number; // Global mouse X position
y: number; // Global mouse Y position
elementX?: number; // Mouse X position relative to element
elementY?: number; // Mouse Y position relative to element
elementPositionX?: number; // Element's X position on page
elementPositionY?: number; // Element's Y position on page
}
`Type Parameters
-
- Type of the element to trackFeatures
- 🌐 Tracks global mouse position
- 📍 Provides element-relative coordinates
- 📐 Calculates element position on page
- 🔄 Real-time updates
- 🧹 Automatic cleanup of event listeners
- 💪 TypeScript supportUsage
`typescriptfunction MouseTracker() {
const [position, ref] = useMousePosition();
return (
{position.elementX !== undefined && (
position: "absolute",
left: position.elementX,
top: position.elementY,
width: "10px",
height: "10px",
background: "red",
borderRadius: "50%",
transform: "translate(-50%, -50%)",
}}
/>
)}
);
}`
🌐 useOnlineStatus 📶
React hook for monitoring the user's internet connection status in real-time.
Returns
-
- Current online status
- true - User is online
- false - User is offlineFeatures
- 🔄 Real-time connection monitoring
- 🌐 Browser-compatible checks
- 🔌 Automatic event handling
- 🧹 Cleanup on unmount
- 🎯 SSR-friendly
- ⚡ Zero configurationUsage
`typescript
function App() {
const isOnline = useOnlineStatus(); return (
Network Status
You are currently{" "}
{isOnline ? "Online" : "Offline"}
.
);
}
`
📑 usePageTitle 🔤
React hook for dynamically managing the document title with automatic cleanup.
Parameters
-
- The new title to set for the documentUsage
`typescript
function App() {
usePageTitle("My Awesome Page"); return (
My Awesome Page
{/ Your content /}
);
}
`
📜 useScrollPosition 🔝
React hook for tracking window scroll position with performance optimization.
Returns
- - Current vertical scroll position in pixels
Usage
`typescript
function App() {
const scrollPosition = useScrollPosition(); return (
backgroundColor: scrollPosition > 100 ? "#fff" : "transparent"
}}>
Scrolled: {scrollPosition}px
{/ Your content /}
);
}
`
🔄 useToggle 🎚️
React hook for managing boolean state with a simple toggle function.
Parameters
- - Initial state value (default: false)Returns
`typescript
[boolean, () => void]
`Usage
typescript
function App() {
const [isOn, toggle] = useToggle(false);
return (
{isOn ? "ON" : "OFF"}
);
}
`
✂️ useTruncate 📝
React hook for truncating text strings with ellipsis.
Returns
typescript
{
truncate: (text: string, length: number) => string
}
`
Parameters for truncate function
-
- Text to truncate (default: '')
- length: number - Maximum length before truncation (default: 0)Usage
`typescript
function MessagePreview() {
const { truncate } = useTruncate();
return (
{truncate("Sender Name", 10)}
{truncate("This is the message content", 25)}
);
}
`
🖥️ useWindowSize 📐
React hook for tracking browser window dimensions with real-time updates.
Returns
typescript
{
width: number, // Current window width in pixels
height: number // Current window height in pixels
}
`
Usage
typescript
function App() {
const { width, height } = useWindowSize(); return (
Window Width: {width}px
Window Height: {height}px
);
}
``