@such12138/react-clipboard-lite

Lightweight React components and hooks for clipboard operations with modern API support.

Features

• 🚀 Modern Clipboard API with automatic fallbacks
• 📦 Tiny bundle size, zero dependencies
• 🎯 TypeScript support with full type definitions
• ♿ Accessible and user-friendly
• 🧪 Fully tested with Vitest + Testing Library

Installation

npm install @such12138/react-clipboard-lite
# or
pnpm add @such12138/react-clipboard-lite
# or
yarn add @such12138/react-clipboard-lite

Quick Start

CopyButton Component

import { CopyButton } from "@such12138/react-clipboard-lite";

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

CopyOnClick Component

import { CopyOnClick } from "@such12138/react-clipboard-lite";

function App() {
  return (
    <CopyOnClick text="Click to copy this">
      <code>Some code here</code>
    </CopyOnClick>
  );
}

useClipboard Hook

import { useClipboard } from "@such12138/react-clipboard-lite";

function App() {
  const { copy, isCopying, error } = useClipboard();

  return (
    <button onClick={() => copy("Hello!")} disabled={isCopying}>
      {isCopying ? "Copying..." : "Copy"}
    </button>
  );
}

API

CopyButton

| Prop | Type | Required | Default | Description | | ---------- | ------------ | -------- | -------- | ------------------- | | text | string | ✅ | - | Text to copy | | children | ReactNode | ❌ | "Copy" | Button content | | onCopied | () => void | ❌ | - | Callback after copy |

CopyOnClick

| Prop | Type | Required | Description | | ---------- | ----------- | -------- | --------------- | | text | string | ✅ | Text to copy | | children | ReactNode | ✅ | Element to wrap |

useClipboard

Options:

• timeout (number, default: 2000): Duration to show copying state

Returns:

• copy(text: string): Function to copy text
• isCopying (boolean): Copy operation status
• error (Error | null): Any error occurred

Browser Support

• Chrome/Edge 66+
• Firefox 63+
• Safari 13.1+
• Opera 53+

Requires secure context (HTTPS or localhost).

For older browsers, ensure your app has appropriate polyfills or fallbacks.

Documentation

• Full Documentation
• API Reference
• Storybook Examples

License

MIT © suchuhong

Contributing

Contributions are welcome! Please read our Contributing Guide.

Issues

Found a bug or have a feature request? Open an issue.