easy-copy-clipboard

A feature-rich, TypeScript-first clipboard utility with modern API support, React hooks, toast notifications, and more.

Features

• 🚀 Modern Clipboard API - Uses native navigator.clipboard with fallback support
• 📖 Read Clipboard - Read text content from clipboard
• 🖼️ Copy Images - Copy images from URLs or Blobs
• ⏱️ Auto-Clear - Automatically clear clipboard after a timeout (for security)
• ⚛️ React Hook - Ready-to-use useCopyToClipboard hook
• 🔔 Toast Notifications - Built-in toast notifications
• 📝 HTML to Plain Text - Strip HTML and copy as plain text
• 🔗 Copy URL - Quick helper to copy current page URL
• 🪶 Lightweight - Zero dependencies, minimal bundle size
• 💪 TypeScript - Full TypeScript support with type definitions

Installation

npm install easy-copy-clipboard

Usage

Basic Copy

import { copyToClipboard } from 'easy-copy-clipboard';

// Simple copy
await copyToClipboard('Hello, World!');

// With result handling
const result = await copyToClipboard('Text to copy');
if (result.success) {
  console.log('Copied!');
}

With Toast Notifications

await copyToClipboard('Hello!', { 
  showToast: true,
  successMessage: '✓ Copied!',
  errorMessage: '✗ Failed to copy'
});

Auto-Clear (Security Feature)

// Clipboard will be cleared after 30 seconds
await copyToClipboard('secret-api-key', { 
  autoClearMs: 30000 
});

Read from Clipboard

import { readFromClipboard } from 'easy-copy-clipboard';

const result = await readFromClipboard();
if (result.success) {
  console.log('Clipboard content:', result.data);
}

Copy Images

import { copyImage } from 'easy-copy-clipboard';

// From URL
await copyImage('https://example.com/image.png');

// From Blob
await copyImage(imageBlob, { showToast: true });

Copy HTML as Plain Text

import { copyHtmlAsPlainText } from 'easy-copy-clipboard';

await copyHtmlAsPlainText('<b>Hello</b> <i>World</i>');
// Copies: "Hello World"

Copy Current URL

import { copyCurrentUrl } from 'easy-copy-clipboard';

await copyCurrentUrl({ showToast: true });

Copy Rich Content (HTML)

import { copyRichContent } from 'easy-copy-clipboard';

await copyRichContent('<b>Bold text</b>', 'text/html');

React Hook

import { useCopyToClipboard } from 'easy-copy-clipboard';

function CopyButton() {
  const { copy, copied, error } = useCopyToClipboard();

  return (
    <button onClick={() => copy('Hello!')}>
      {copied ? '✓ Copied!' : 'Copy'}
    </button>
  );
}

Show Custom Toast

import { showToast } from 'easy-copy-clipboard';

showToast({ 
  message: 'Custom notification!', 
  type: 'success', // 'success' | 'error' | 'info'
  duration: 3000 
});

Check Browser Support

import { isClipboardSupported } from 'easy-copy-clipboard';

const support = isClipboardSupported();
console.log(support);
// {
//   modern: true,
//   legacy: true,
//   writeText: true,
//   write: true,
//   read: true,
//   readText: true
// }

API Reference

copyToClipboard(text, options?)

| Parameter | Type | Description | |-----------|------|-------------| | text | string | The text to copy | | options.onSuccess | () => void | Success callback | | options.onError | (error: Error) => void | Error callback | | options.autoClearMs | number | Auto-clear after ms | | options.showToast | boolean | Show toast notification | | options.successMessage | string | Custom success message | | options.errorMessage | string | Custom error message |

readFromClipboard()

Returns Promise<ClipboardResult<string>> with clipboard text.

copyImage(source, options?)

Copy image from URL or Blob to clipboard.

copyHtmlAsPlainText(html, options?)

Strip HTML tags and copy as plain text.

copyCurrentUrl(options?)

Copy the current page URL.

copyRichContent(content, mimeType?, options?)

Copy rich content like HTML to clipboard.

useCopyToClipboard(timeout?)

React hook for clipboard operations. Returns { copy, read, copied, error, value, reset }.

showToast(options)

Display a toast notification.

isClipboardSupported()

Check browser clipboard API support.

Browser Support

| Browser | Clipboard API | Fallback | |---------|--------------|----------| | Chrome 66+ | ✅ | ✅ | | Firefox 63+ | ✅ | ✅ | | Safari 13.1+ | ✅ | ✅ | | Edge 79+ | ✅ | ✅ | | IE 11 | ❌ | ✅ |

License

MIT