useCopyToClipboard

Live Demo

Try copying different types of content. Success state auto-resets after 3 seconds.

import { useCopyToClipboard } from "@uiblock/hooks";

export default function Demo() {
  const { copy, isSuccess } = useCopyToClipboard();
  
  return (
    <button onClick={() => copy('Hello World!')}>
      {isSuccess ? 'Copied!' : 'Copy'}
    </button>
  );
}

Code Examples

Basic Usage

import { useCopyToClipboard } from "@uiblock/hooks";

export default function CopyButton() {
  const { copy, isSuccess } = useCopyToClipboard();

  return (
    <button onClick={() => copy('Hello World!')}>
      {isSuccess ? '✅ Copied!' : '📋 Copy'}
    </button>
  );
}

With Error Handling

import { useCopyToClipboard } from "@uiblock/hooks";

export default function CopyWithError() {
  const { copy, isSuccess, isError, error } = useCopyToClipboard();

  const handleCopy = async (text) => {
    const success = await copy(text);
    if (success) {
      console.log('Copied successfully!');
    }
  };

  return (
    <div>
      <button onClick={() => handleCopy('Copy me!')}>
        Copy
      </button>
      {isSuccess && <p>✅ Copied!</p>}
      {isError && <p>❌ Error: {error}</p>}
    </div>
  );
}

Copy Code Snippet

import { useCopyToClipboard } from "@uiblock/hooks";

export default function CodeBlock({ code }) {
  const { copy, isSuccess } = useCopyToClipboard(2000);

  return (
    <div className="code-block">
      <pre>{code}</pre>
      <button onClick={() => copy(code)}>
        {isSuccess ? 'Copied!' : 'Copy Code'}
      </button>
    </div>
  );
}

Custom Timeout

import { useCopyToClipboard } from "@uiblock/hooks";

export default function CustomTimeout() {
  // Success state resets after 5 seconds
  const { copy, isSuccess, reset } = useCopyToClipboard(5000);

  return (
    <div>
      <button onClick={() => copy('Text')}>Copy</button>
      {isSuccess && (
        <div>
          <span>Copied!</span>
          <button onClick={reset}>Reset Now</button>
        </div>
      )}
    </div>
  );
}

How It Works

Here's the implementation with fallback support:

import { useState, useCallback } from 'react'

export function useCopyToClipboard(timeout = 2000) {
  const [copiedText, setCopiedText] = useState(null)
  const [isSuccess, setIsSuccess] = useState(false)
  const [isError, setIsError] = useState(false)
  const [error, setError] = useState(null)

  const reset = useCallback(() => {
    setCopiedText(null)
    setIsSuccess(false)
    setIsError(false)
    setError(null)
  }, [])

  const copy = useCallback(async (text) => {
    reset()

    try {
      // Modern Clipboard API (preferred)
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(text)
        setCopiedText(text)
        setIsSuccess(true)
        setTimeout(reset, timeout)
        return true
      }

      // Fallback for older browsers
      const textArea = document.createElement('textarea')
      textArea.value = text
      textArea.style.position = 'fixed'
      textArea.style.left = '-999999px'
      document.body.appendChild(textArea)
      textArea.select()

      const successful = document.execCommand('copy')
      textArea.remove()

      if (successful) {
        setCopiedText(text)
        setIsSuccess(true)
        setTimeout(reset, timeout)
        return true
      }
      
      throw new Error('Copy failed')
    } catch (err) {
      setError(err.message)
      setIsError(true)
      return false
    }
  }, [timeout, reset])

  return { copiedText, copy, isSuccess, isError, error, reset }
}

API Reference

Browser Support

💡 Use Cases

• Copy code snippets from documentation
• Share links and URLs
• Copy API keys and tokens
• Copy email addresses and phone numbers
• Copy formatted text or JSON data
• Copy command-line instructions
• Share referral codes
• Copy product IDs or SKUs