useCopyToClipboard
React hook for copying text to clipboard with automatic feedback state. Perfect for React applications requiring copy functionality with Next.js integration and TypeScript support.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/use-copy-to-clipboard.jsonnpx shadcn@latest add https://www.shadcn.io/registry/use-copy-to-clipboard.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-copy-to-clipboard.jsonbunx shadcn@latest add https://www.shadcn.io/registry/use-copy-to-clipboard.jsonFeatures
- Async clipboard API with modern navigator.clipboard.writeText() method
- Automatic feedback state with temporary success indicator for user experience
- Error handling with console warnings for unsupported browsers
- Auto-reset timer that clears copied state after 2 seconds automatically
- TypeScript support with complete type definitions for return tuple
- Promise-based API for chaining operations and handling success/failure
Examples
Advanced Usage
Demonstrates custom input copying and quick-copy buttons with toast notifications.
Use Cases
This free open source React hook works well for:
- Copy buttons - Add one-click copying functionality to buttons built with Next.js
- Code snippets - Enable easy copying of code blocks using TypeScript patterns
- Share links - Copy URLs and sharing links with user feedback indicators
- Text inputs - Add copy functionality to form inputs and text areas
- API keys - Secure copying of sensitive information with temporary feedback
- Documentation - Copy code examples and commands in technical docs
API Reference
useCopyToClipboard
Returns a tuple with copy function and copied state boolean.
| Return Value | Type | Description |
|---|---|---|
copy | (text: string) => Promise<void> | Async function to copy text to clipboard |
isCopied | boolean | State indicating if text was recently copied |
Usage Pattern
const [copy, isCopied] = useCopyToClipboard();
// Basic usage
copy("Hello world");
// With promise handling
copy("Hello world").then(() => {
console.log("Copied successfully!");
});
// With error handling
copy("Hello world").catch(() => {
console.log("Copy failed");
});Implementation Notes
- Hook uses modern
navigator.clipboard.writeText()API for secure clipboard access - Automatically resets
isCopiedstate tofalseafter 2 seconds for user feedback - Includes browser compatibility check with console warnings for unsupported environments
- Copy function returns Promise for handling success/failure states in components
- Works in secure contexts only (HTTPS or localhost) due to clipboard API restrictions
- Compatible with all modern browsers that support the Clipboard API
- Requires user interaction to trigger clipboard operations per browser security policies
useClickAnyWhere
Document-wide click event detection for React applications. Perfect for Next.js projects requiring global click tracking with TypeScript support and seamless integration.
useCountdown
React hook that manages countdown functionality with configurable intervals, increment/decrement modes, and start/stop/reset controls.