react-copyx

React CopyX – React Clipboard Hook & Components

A powerful, flexible React hook and components for copying text, HTML, JSON, and images to the clipboard with built-in success states, copy history, and fallback support.
Make copying effortless in your React 18+ apps with a lightweight, dependency-free clipboard solution.

Features

• 📋 Copy plain text, HTML, JSON, and images.
• 🔄 Auto success state management: isCopying, lastCopied, copyCount, history.
• 🌍 Modern Clipboard API with fallback support for older browsers.
• 🎯 Optional callbacks on success or error.
• ⚡ Ready-to-use React components for quick demos.
• 🪶 Lightweight, dependency-free (< 4KB gzipped).

Installation

Install via npm or pnpm:

# Using npm
npm install react-copyx

# Using pnpm
pnpm add react-copyx

Demo-only dependencies (Tailwind, icons) are not included in the package.

Usage

Using the Hook

import { useCopy } from 'react-copyx';

export const MyComponent = () => {
  const { copy, isCopying, lastCopied, copyCount } = useCopy({
    onSuccess: (value) => console.log('Copied:', value),
    onError: (err) => console.error('Copy failed', err),
    keepHistory: true,
    resetAfter: 2000,
  });

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

API Reference

Hook API

Prop / Return	Type	Description
copy(value, options)	(value: string | Blob | Record<string,unknown>, options?: CopyOptions) => Promise<void>	Copy a value to clipboard. Supports text, html, json, and image.
isCopying	boolean	True while copy action is in progress.
lastCopied	{ value: string, timestamp: number } | null	Last copied value and timestamp.
copyCount	number	Total number of copy actions.
history	Array<{ value: string, timestamp: number }>	History of copied values (if keepHistory is enabled).
hasCopiedRecently	boolean	True if last copy was within resetAfter ms.

CopyOptions

Option	Type	Default	Description
format	'text' | 'html' | 'json' | 'image'	'text'	Format of the copied content.
fallback	boolean	true	Enable fallback for unsupported browsers.
mimeType	string	—	Custom MIME type (for images).

Best Practices

• Use keepHistory: true if you need multiple copy tracking.
• Always provide an onError callback for robust apps.
• HTML copy requires modern browsers; fallback may strip formatting.
• Images require navigator.clipboard.write support.

FAQ (SEO Optimized)

🔹 How do I copy text to clipboard in React?

Use the useCopy hook:

const { copy } = useCopy();
copy("Hello World");

🔹 Can I copy JSON or HTML to clipboard in React?

Yes!

copyToClipboard({ text: JSON.stringify({ name: "Amin" }), format: "application/json" });

🔹 Does React CopyX support images?

Yes, with the modern Clipboard API (navigator.clipboard.write).

📄 License

MIT © Amin Tai