Guide

Installation

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

Basic Usage

Import Components

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

CopyButton Component

The CopyButton component renders a button that copies text to the clipboard.

function App() {
  return (
    <CopyButton
      text="npm install @such12138/react-clipboard-lite"
      onCopied={() => console.log("Copied!")}
    >
      Copy Command
    </CopyButton>
  );
}

Props:

• text (string, required): The text to copy
• children (ReactNode, optional): Button content (default: "Copy")
• onCopied (function, optional): Callback fired after successful copy

CopyOnClick Component

Wraps any element and copies text when clicked.

function App() {
  return (
    <CopyOnClick text="Hello, World!">
      <code style={{ cursor: "pointer" }}>Click me to copy</code>
    </CopyOnClick>
  );
}

Props:

• text (string, required): The text to copy
• children (ReactNode, required): The element to wrap

useClipboard Hook

For more control, use the useClipboard hook.

function App() {
  const { copy, isCopying, error } = useClipboard({ timeout: 2000 });
  const [text, setText] = useState("");

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => copy(text)} disabled={isCopying}>
        {isCopying ? "Copying..." : "Copy"}
      </button>
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

Returns:

• copy(text: string): Function to copy text
• isCopying (boolean): Whether a copy operation is in progress
• error (Error | null): Any error that occurred

Options:

• timeout (number, default: 2000): How long to show "copying" state (ms)

TypeScript Support

All components and hooks are fully typed:

import type {
  CopyButtonProps,
  CopyOnClickProps,
  UseClipboardOptions,
} from "@such12138/react-clipboard-lite";

Browser Support

Works in all modern browsers that support the Clipboard API:

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

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

Examples

Check out the Storybook for interactive examples and the demo app for a complete implementation.