react-copier

A lightweight, customizable React library for copying text to the clipboard — with built-in visual feedback, tooltips, custom icons, and full TypeScript support.

📌 Table of Contents

1. Features
2. Demo
3. Installation
4. Usage
   • CopyButton
   • useCopy Hook
5. API Reference
6. Props
7. Error Handling
8. Browser Support
9. Advanced Examples
10. TypeScript
11. Contributing
12. License

🚀 Features

✨ Simple API — Easy to integrate into any React app
🎨 Fully Customizable — Style overrides & flexible structure
🎯 Visual Feedback — Tooltip + success animations
🪝 Hook & Component — You choose how to use it
🔔 Callbacks — Success and error handlers
⚡ Lightweight — Zero dependencies
🧩 Icons Support — Custom icons for default/copied state
🔐 Secure — Uses modern Clipboard API
📘 Full TypeScript Support

📥 Installation

npm install react-copier
# or
yarn add react-copier
# or
pnpm add react-copier

🚀 Usage

CopyButton

import { CopyButton } from "react-copier";

export default function App() {
  return (
    <CopyButton text="Hello, World!" showTooltip>
      Copy
    </CopyButton>
  );
}

With Icons

import { CopyButton } from "react-copier";
import { Copy, Check } from "lucide-react";

<CopyButton
  text="Copy this!"
  icon={<Copy size={16} />}
  copiedIcon={<Check size={16} />}
  successMessage="Copied!"
  showTooltip
>
  Copy
</CopyButton>;

With Custom Styles

<CopyButton
  text="Styled"
  buttonStyle={{
    background: "#000",
    color: "#fff",
    padding: "12px 24px",
    borderRadius: 8
  }}
  tooltipStyle={{
    background: "#333",
    color: "#fff"
  }}
  showTooltip
>
  Copy Styled
</CopyButton>

useCopy Hook

import { useCopy } from "react-copier";

function Example() {
  const { copy, copied } = useCopy(1500);

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

📘 API Reference

CopyButton Props

| Prop | Type | Default | Description | | ------------------ | ----------------- | ----------- | --------------------- | | text | string | — | Text to copy | | children | ReactNode | "Copy" | Button label | | showTooltip | boolean | false | Enable tooltip | | timeout | number | 1500 | Reset time (ms) | | successMessage | string | "" | Success label | | tooltipMessage | string | "Copied!" | Tooltip label | | buttonStyle | CSSProperties | — | Custom button styles | | tooltipStyle | CSSProperties | — | Custom tooltip styles | | containerStyle | CSSProperties | — | Wrapper styles | | tooltipBgColor | string | "#000" | Tooltip background | | tooltipTextColor | string | "#fff" | Tooltip text | | icon | ReactNode | — | Default icon | | copiedIcon | ReactNode | — | Icon after copy | | onCopySuccess | () => void | — | Success callback | | onCopyError | (error) => void | — | Error callback |

🎣 useCopy Hook

const { copy, copied } = useCopy(
  timeout?: number,
  onSuccess?: () => void,
  onError?: (err: Error) => void
);

| Name | Type | Description | | ------------ | --------------- | ------------------------------------ | | copy(text) | Promise<void> | Copies text | | copied | boolean | True while text is in "copied" state |

⚠️ Error Handling

The library gracefully handles:

• Clipboard permission issues
• HTTPS restrictions
• Browser security errors
• Focus issues (Safari/Firefox edge cases)

Example:

<CopyButton
  text="Copy me"
  onCopyError={(err) => alert("Copy failed: " + err.message)}
/>

🌍 Browser Support

| Browser | Supported | | ------------ | --------- | | Chrome 63+ | ✅ | | Firefox 53+ | ✅ | | Safari 13.1+ | ✅ | | Edge 79+ | ✅ | | IE | ❌ |

[!IMPORTANT] Clipboard API requires HTTPS in production. localhost works automatically.

🧪 Advanced Examples

1. Copy Code Block

function CodeSnippet({ code }) {
  return (
    <div style={{ position: "relative" }}>
      <pre>{code}</pre>
      <CopyButton
        text={code}
        showTooltip
        buttonStyle={{
          position: "absolute",
          top: 8,
          right: 8
        }}
      >
        Copy
      </CopyButton>
    </div>
  );
}

2. Share Link

function ShareLink({ url }) {
  const { copy, copied } = useCopy();
  return (
    <button onClick={() => copy(url)}>
      {copied ? "✓ Copied" : "Share"}
    </button>
  );
}

3. Form Integration

function Share({ url }) {
  const { copy, copied } = useCopy();

  return (
    <div style={{ display: "flex", gap: 8 }}>
      <input value={url} readOnly />
      <button onClick={() => copy(url)}>
        {copied ? "Copied!" : "Copy Link"}
      </button>
    </div>
  );
}

🧑‍💻 TypeScript Support

Types included automatically.

type CopyButtonProps = {
  text: string;
  successMessage?: string;
  tooltipMessage?: string;
  icon?: ReactNode;
  copiedIcon?: ReactNode;
  // ...
};

type UseCopyReturn = {
  copy: (text: string) => Promise<void>;
  copied: boolean;
};

🤝 Contributing

PRs are welcome! Please open an issue if you find a bug or want a new feature.

📄 License

MIT

Made with ❤️ for the React community.