📦 Copy-text-to-clipboard-lite

A simple and reusable React component to copy text to clipboard with customizable icon and toast notifications.

⚡ Features

🌐 Copy any string to the clipboard with a single click

🧩 Customizable icon — supports both React Icons and image URLs (PNG, SVG, etc.)

🎨 Adjustable icon size and color

🟢 Optional toast notifications for success or error

🖌️ TailwindCSS-friendly styling out of the box

🙈 Hide or show the copied text (icon-only or text + icon mode)

⛔ Disabled and loading states with visual feedback

🔔 onCopy callback for custom logic after successful copy

⚙️ Fully typed with TypeScript — perfect for modern React projects

⚡ Lightweight & ready for npm publish

⚙️ Props

| Prop | Type | Default | Description | | --------------- | ------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------- | | value | string | — | The text to copy to the clipboard. | | icon | ReactElement<{ size?: number; color?: string }> \| string | <FaRegCopy /> | Custom icon — can be a React icon or an image URL (SVG/PNG/etc.). | | size | number | 18 | Size of the icon in pixels. | | color | string | #000 | Color of the icon (applies to React icons only). | | copiedMessage | string | "Text copied successfully!" | Message shown in the toast when text is copied. | | className | string | "" | Additional classes for the wrapper container. | | textClassName | string | "text-gray-700" | Tailwind classes for the displayed text value. | | hideText | boolean | true | If true, hides the text and shows only the icon. | | disabled | boolean | false | If true, disables copy interaction. | | loading | boolean | false | If true, shows a spinner instead of the icon. | | onCopy | (value: string) => void | — | Callback triggered after successful copy. | | showToast | boolean | true | Whether to show a toast notification on copy. | | toastPosition | "top-right" \| "top-center" \| "top-left" \| "bottom-right" \| "bottom-center" \| "bottom-left" | "top-right" | Position of the toast notification. | | toastDuration | number | 1500 | Duration (ms) before toast auto-closes. | | toastTheme | "light" \| "dark" \| "colored" | "light" | Theme style of the toast notification. | | ariaLabel | string | "Copy to clipboard" | Accessibility label for screen readers. |

💿 Installation

# Using npm
npm install copy-text-to-clipboard-lite

# Using yarn
yarn add copy-text-to-clipboard-lite

🛠 How to Use

Import the component in your React project and pass the text value you want to copy. You can also customize the icon, color, size, and toast message — or even use an image as an icon.

🧩 Basic Usage

import React from "react";
import { CopyIcon } from "copy-text-to-clipboard-lite"; // 👈 

import { FaCopy } from "react-icons/fa";

const App = () => {
  return (
    <div className="p-5 flex flex-col gap-4">
      {/* ✅ Copy text with default icon */}
      <CopyIcon value="[email protected]" />

      {/* 🎨 Copy text with a custom React icon */}
      <CopyIcon
        value="[email protected]"
        icon={<FaCopy />}
        size={22}
        color="blue"
        copiedMessage="Copied to clipboard!"
        showToast
      />

      {/* 🔒 Icon-only copy button */}
      <CopyIcon
        value="SecretKey123"
        hideText
        icon={<FaCopy />}
        size={24}
        color="red"
      />
    </div>
  );
};

export default App;

🖼️ Using an Image as Icon

import React from "react";
import { CopyIcon } from "copy-text-to-clipboard-lite";

const App = () => {
  return (
    <div className="p-5 flex items-center gap-4">
      {/* 🖼️ Using an image (SVG/PNG) as icon */}
      <CopyIcon
        value="https://yourwebsite.com"
        icon="/assets/custom-copy.svg"
        size={28}
        copiedMessage="Link copied!"
      />
    </div>
  );
};

export default App;

⚡ Optional Props Example

<CopyIcon
  value="Sample text"
  showToast={false}         // Disable toast
  disabled={false}          // Make interactive
  loading={false}           // Manually show spinner if needed
  toastTheme="colored"      // Change toast color theme
  onCopy={(val) => console.log("Copied:", val)} // Custom callback
/>

👤 Author

• Md. Mohiuddin Murad

• Email: [email protected]

• GitHub: https://github.com/muradmy00

✅ Notes for Users

💅 TailwindCSS:

The component is styled using Tailwind utility classes. If you want to use the default look, make sure TailwindCSS is installed and configured in your project. You can also use it without Tailwind — simply override styles with your own CSS.

⚙️ Icons:

The icon prop supports:

Any React icon (e.g., from react-icons/fa, react-icons/md, etc.)

Or a custom image (.svg, .png, .jpg, etc.)

🔔 Toast Notifications:

Copy success/error messages are displayed using react-toastify . Make sure it’s installed if you enable showToast:

npm install react-toastify

🧠 Clipboard API:

This component uses the modern Clipboard API . It’s supported in all modern browsers.