@nobrainers/react-copytext

Demo

react-copytext.demo.mov

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