use-copy-to-clipboard (use-copy-to-clipboard)
Hook for controlling list pagination.
v0.1.0
Usage
import { use-copy-to-clipboard } from "@/hooks"1"use client";
2
3import React, { useState } from "react";
4
5import { Button } from "@/components/ui/button";
6import {
7 Card,
8 CardContent,
9 CardDescription,
10 CardHeader,
11 CardTitle,
12} from "@/components/ui/card";
13import { Input } from "@/components/ui/input";
14
15import { useCopyToClipboard } from "@/components/hooks/use-copy-to-clipboard";
16
17export function UseCopyToClipboardDemo() {
18 const [text, setText] = useState("");
19 const { copied, copy } = useCopyToClipboard();
20
21 return (
22 <Card className="relative max-w-sm w-full">
23 <CardHeader>
24 <CardTitle>useCopyToClipboard</CardTitle>
25 <CardDescription>
26 This component uses the <code>useCopyToClipboard</code> hook to copy
27 text to the clipboard.
28 </CardDescription>
29 </CardHeader>
30 <CardContent className="space-y-4">
31 <Input
32 value={text}
33 onChange={(e) => setText(e.target.value)}
34 placeholder="Type something to copy..."
35 />
36 <div className="flex items-center gap-2">
37 <Button onClick={() => copy(text)} disabled={!text}>
38 Copiar
39 </Button>
40 {copied && (
41 <span className="text-green-500 bg-green-500/20 px-2 py-0.5 rounded-md">
42 Copied!
43 </span>
44 )}
45 </div>
46 </CardContent>
47 </Card>
48 );
49}
50Install
npx wkkkis-hooks add use-copy-to-clipboardOptions
| Name | Type | Default | Description |
|---|---|---|---|
| duration | number | 1500 | The duration of the copied state |
Returns — Properties
| Name | Type | Default | Description |
|---|---|---|---|
| const | — | — | — |
| copy | — | — | — |
| useCopyToClipboard | — | — | — |
| const | — | — | — |
| handleCopy | — | — | — |
| async | — | — | — |
| const | — | — | — |
| success | — | — | — |
| await | — | — | — |
| copy | — | — | — |
| if | — | — | — |
| alert | — | — | — |
| Contribute | — | — | — |
| Report | — | — | an issue |
| Request | — | — | a feature |
| Edit | — | — | this page |
| Brought | — | — | to you by h3rmel . |
Browser Support & Fallback
- Uses the modern navigator.clipboard.writeText API if available.
- Falls back to a legacy method using a hidden textarea and document.execCommand('copy') for older browsers.
Error Handling
- If copying fails, the hook logs an error and returns false from the copy function.
Copied State & Duration
- The copied state is set to true when copying succeeds, and automatically resets to false after the specified duration (in ms).
Cleanup
- Any pending timeout is cleared when the component unmounts, preventing memory leaks or unexpected state changes.
Best Practices & Caveats
- The hook is client-side only; on the server, it does not interact with the clipboard.
- Some browsers may block clipboard access unless triggered by a user gesture (e.g., a button click).
- The fallback method may not work in all environments (e.g., some mobile browsers).
- For best performance, avoid creating new copy functions on every render.
Files in this hook
| Source | Destination |
|---|---|
| files/use-copy-to-clipboard.ts | src/hooks/use-copy-to-clipboard.ts |