react-copy-button-lite

A simple and lightweight React Copy to Clipboard button component.

Installation

npm install react-copy-button-lite

Usage

import React from 'react'
import { CopyToClipboard } from 'react-copy-button-lite'

function App() {
  return (
    <div>
      <CopyToClipboard 
        text="Hello, World!" 
        buttonLabel="Copy Text"
        copiedLabel="Copied!"
        className="my-copy-button"
      />
    </div>
  )
}

API

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | text | string | Required | The text to copy to clipboard | | buttonLabel | string | 'Copy' | Text displayed on the button | | copiedLabel | string | 'Copied!' | Text displayed when copy is successful | | className | string | '' | CSS class name for styling |

Example

<CopyToClipboard 
  text="npm install react-copy-button-lite"
  buttonLabel="Copy Command"
  copiedLabel="Command Copied!"
  className="copy-btn"
/>

Features

• 🚀 Lightweight and simple
• 📋 Uses modern Clipboard API
• ⚡ TypeScript support
• 🎨 Customizable styling
• 🔄 Automatic state reset after 2 seconds

Browser Support

This component uses the modern Clipboard API, which is supported in:

• Chrome 66+
• Firefox 63+
• Safari 13.1+
• Edge 79+

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch for changes during development
npm run dev

License

ISC

Author

Amanpreet Kaur