useClipboard

Copy text to clipboard and manage copy state.


✅ Features

  • Copy any string to clipboard
  • Built-in state to track copied status
  • Auto-reset after delay (default 1.5s)

📦 Usage

1import { useClipboard } from './useClipboard';
2
3const { copy, copied } = useClipboard();
4
5return (
6  <button onClick={() => copy("Copied Text!")}>
7    {copied ? "Copied!" : "Copy"}
8  </button>
9);

📋 Source Code

This is the full implementation of useClipboard

1import { useState } from 'react';
2
3export function useClipboard() {
4  const [copied, setCopied] = useState(false);
5
6  const copy = async (text: string) => {
7    try {
8      await navigator.clipboard.writeText(text);
9      setCopied(true);
10      setTimeout(() => setCopied(false), 1500);
11    } catch (err) {
12      console.error('Clipboard copy failed', err);
13    }
14  };
15
16  return { copied, copy };
17}
18