@nobrainers/react-copytext

Demo

https://github.com/user-attachments/assets/a5882c1a-441e-4c6a-acb4-f0b611aaca58

Table of Contents

• Overview
• Examples
  • Basic Usage
  • With Custom Labels
  • Without Icons
  • With Custom Styling
  • With Copy Feedback
  • With Custom Icons
• Installation
• Usage
• Props
• Features
• License

Overview

React CopyText is a React component that allows users to easily copy text to their clipboard. The component shows the text and a button that, when clicked, copies the text and provides visual feedback.

Examples

Basic Usage

<CopyText text="Copy this text" />

With Custom Labels

<CopyText
  text="Copy this text"
  copyButtonLabel="Click to copy"
  copiedButtonLabel="Text copied!"
/>

Without Icons

<CopyText text="Copy this text" showIcon={false} />

With Custom Styling

<CopyText
  text="Copy this text"
  className="custom-wrapper"
  buttonClassName="custom-button"
  textClassName="custom-text"
/>

With Copy Feedback

const [copied, setCopied] = useState(false);

<CopyText
  text="Copy this text"
  copied={copied}
  onClick={() => {
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }}
/>;

With Custom Icons

Note: You can use icons from any package. This example uses Feather icons (react-icons/fi), while the default icons come from Font Awesome (react-icons/fa6).

import { FiCopy, FiCheck } from "react-icons/fi";

<CopyText text="Copy this text" copyIcon={FiCopy} copiedIcon={FiCheck} />;

A simple and customizable React component for copying text to the clipboard.

Installation

npm install @nobrainers/react-copytext

Usage

import { CopyText } from "react-copytext";
// Don't forget to import the styles
import "react-copytext/dist/style.css";

function App() {
  const [copied, setCopied] = useState(false);

  return (
    <CopyText
      text="Text to be copied"
      copied={copied}
      onClick={() => setCopied(true)}
    />
  );
}

⚠️ Important: Make sure to import the CSS file to get the default styling:

import "react-copytext/dist/style.css";

Props

| Prop | Type | Default | Description | | ------------------- | ----------------- | -------------- | --------------------------------------------- | | text | string | (required) | The text to be copied | | copied | boolean | false | Indicates if the text has been copied | | onClick | function | () => {} | Callback function called after text is copied | | buttonClassName | string | - | Additional CSS class for the button | | className | string | - | Additional CSS class for the wrapper | | textClassName | string | - | Additional CSS class for the text element | | showIcon | boolean | true | Whether to show copy/copied icons | | copyButtonLabel | string | "Copy" | Label for the copy button | | copiedButtonLabel | string | "Copied" | Label for the copied state | | copyIcon | React.ElementType | FaRegClipboard | Custom icon for copy state | | copiedIcon | React.ElementType | FaCheck | Custom icon for copied state |

Features

• 🎨 Customizable styling
• 📱 Responsive design
• ✨ Copy feedback states
• 🎯 TypeScript support
• 📦 Lightweight

License

MIT