useClipboard

browser

Installation

npx usehooks-cli@latest add use-clipboard

Description

A React hook for interacting with the clipboard API to copy text content with state management, error handling, and automatic feedback.

Return Type

UseClipboardReturn

Property	Type	Description
value	string \| null	The last successfully copied text value
copy	(text: string) => Promise<boolean>	Copy text to clipboard, returns true if successful
copied	boolean	True if text was recently copied (resets after 2 seconds)
error	string \| null	Error message if copy operation failed

Examples

Copy Button with Feedback

Basic copy functionality with visual feedback

const { copy, copied, error } = useClipboard();
const [text] = useState('Hello, World!');

const handleCopy = async () => {
  await copy(text);
};

return (
  <div>
    <p>{text}</p>
    <button onClick={handleCopy} disabled={copied}>
      {copied ? 'Copied!' : 'Copy'}
    </button>
    {error && <p style={{ color: 'red' }}>Error: {error}</p>}
  </div>
);

Copy Code Snippet

Copying code with syntax highlighting and feedback

const { copy, copied, error } = useClipboard();

const CodeBlock = ({ code, language }) => {
  const handleCopyCode = async () => {
    const success = await copy(code);
    if (success) {
      // Optional: Show toast notification
      showToast('Code copied to clipboard!');
    }
  };

  return (
    <div className="code-block">
      <div className="code-header">
        <span>{language}</span>
        <button 
          onClick={handleCopyCode}
          className={copied ? 'copied' : ''}
        >
          {copied ? '✓ Copied' : '📋 Copy'}
        </button>
      </div>
      <pre><code>{code}</code></pre>
      {error && <div className="error">{error}</div>}
    </div>
  );
};

Share URL Functionality

Copying current page URL with user feedback

const { copy, copied, value, error } = useClipboard();

const ShareButton = () => {
  const handleShareUrl = async () => {
    const currentUrl = window.location.href;
    const success = await copy(currentUrl);
    
    if (success) {
      // Optional: Analytics tracking
      trackEvent('url_shared', { url: currentUrl });
    }
  };

  return (
    <div className="share-section">
      <button onClick={handleShareUrl} className="share-btn">
        {copied ? '🎉 Link Copied!' : '🔗 Share This Page'}
      </button>
      
      {copied && value && (
        <div className="copied-url">
          <small>Copied: {value}</small>
        </div>
      )}
      
      {error && (
        <div className="error-message">
          Failed to copy: {error}
        </div>
      )}
    </div>
  );
};

Dependencies

react

Notes

•Requires a secure context (HTTPS) for the Clipboard API to work
•Automatically resets the 'copied' state after 2 seconds
•Gracefully handles browsers that don't support the Clipboard API
•Returns boolean from copy function to indicate success/failure
•Stores the last successfully copied value for reference
•Provides detailed error messages for debugging

Implementation

"use client";

import { useState, useCallback } from "react";

interface UseClipboardReturn {
  value: string | null;
  copy: (text: string) => Promise<boolean>;
  copied: boolean;
  error: string | null;
}

export function useClipboard(): UseClipboardReturn {
  const [value, setValue] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const copy = useCallback(async (text: string): Promise<boolean> => {
    if (!navigator?.clipboard) {
      setError("Clipboard not supported");
      return false;
    }

    try {
      await navigator.clipboard.writeText(text);
      setValue(text);
      setCopied(true);
      setError(null);

      // Reset copied state after 2 seconds
      setTimeout(() => setCopied(false), 2000);

      return true;
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to copy");
      setCopied(false);
      return false;
    }
  }, []);

  return {
    value,
    copy,
    copied,
    error,
  };
}

useBluetooth

CLI Docs All Hooks

useContactPicker