useClipboard

A hook for interacting with the clipboard API. It provides functionality to copy text to the clipboard and track the last copied content.

Parameters

This hook doesn’t take any parameters.

Returns

• copiedText: string | null - The last successfully copied text or null if copy failed
• copyToClipboard: (value: string) => Promise<string> - Function to copy text to clipboard

Usage

import { useClipboard } from '@rhinolabs/react-hooks';
 
function CopyButton() {
  const { copiedText, copyToClipboard } = useClipboard();
 
  const handleCopy = async () => {
    try {
      await copyToClipboard('Hello, clipboard!');
      console.log('Text copied successfully');
    } catch (error) {
      console.error('Failed to copy:', error);
    }
  };
 
  return (
    <div>
      <button onClick={handleCopy}>
        {copiedText ? 'Copied!' : 'Copy Text'}
      </button>
    </div>
  );
}

Notes

• Uses modern Clipboard API with fallback error handling
• Implements async operations with Promise-based interface
• Maintains state of last copied text with automatic updates
• Handles browser support and permission errors
• Provides comprehensive error boundaries for all failure cases