react-copy-to-clipboard-lite

Tiny(~1.1 kB), dependency-free clipboard utility for React 18+. SSR-safe. Permission-aware. MIT.

Why this library?

• Zero runtime dependencies, tiered fallback (Clipboard API → execCommand)
• Structured CopyResult, never throws
• Permission-aware (no prompt()), SSR-safe
• React 19 formAction / useActionState support
• TypeScript strict, size-gated in CI, Unit + E2E coverage

Install

npm install react-copy-to-clipboard-lite
# or: pnpm add / yarn add

Peer: react >= 18

Demo

Live demo · Run locally: npm run dev:demo

Core (framework-agnostic)

import { copyToClipboard } from "react-copy-to-clipboard-lite";

const result = await copyToClipboard("Hello world");
if (result.success) console.log("Copied via:", result.method);
else console.log("Failed:", result.code);

Hook

import { useCopyToClipboard } from "react-copy-to-clipboard-lite/react";

function Example() {
  const { copy, copied, error } = useCopyToClipboard({ timeout: 1500, clearAfter: 1000 });
  return (
    <button onClick={() => copy("Secret API Key")}>{copied ? "Copied!" : "Copy"}</button>
  );
}

copy(text) → Promise<CopyResult> · copied / error / reset()

Component

import { CopyToClipboard } from "react-copy-to-clipboard-lite/react";

<CopyToClipboard text="Copy this" onSuccess={() => {}} onError={(r) => console.log(r.code)}>
  <button>Copy</button>
</CopyToClipboard>

Preserves your onClick; works with buttons, spans, links.

React 19 Action

import { copyToClipboardAction } from "react-copy-to-clipboard-lite/react";

<form>
  <input name="text" defaultValue="Hello" />
  <button formAction={copyToClipboardAction}>Copy</button>
</form>

Works with useActionState and Server Components (client boundary).

CopyResult

type CopyResult = {
  success: boolean;
  method: "clipboard-api" | "exec-command" | "unsupported" | "failed";
  code?: "SECURITY_ERROR" | "PERMISSION_DENIED" | "INSECURE_CONTEXT" | "NO_BROWSER_SUPPORT" | "UNKNOWN";
  error?: unknown;
};

clearAfter (e.g. passwords)

copyToClipboard("my-password", { clearAfter: 3000 });

Clears clipboard after X ms (best-effort). Never reads clipboard.

Behaviour

• Permission-aware: uses navigator.permissions.query() when available; never prompts.
• SSR-safe: browser APIs used only inside functions. Works in Next.js, Remix, Vite SSR, Astro, RSC.
• Size: CI enforces < 2 KB (index), < 3 KB (react); brotli.

Browser support

| Clipboard API | execCommand fallback | IE11 | |---------------|----------------------|------| | Modern | Safari / legacy | No |

No prompt() fallback; no clipboard-read.

Comparison

| Feature | This lib | Typical | |-------------------|----------|---------| | Zero deps | Yes | No | | SSR safe | Yes | Often | | Structured result | Yes | No | | React 19 Actions | Yes | No | | Permission-aware | Yes | No |

Migration from react-copy-to-clipboard

- import { CopyToClipboard } from "react-copy-to-clipboard"
+ import { CopyToClipboard } from "react-copy-to-clipboard-lite/react"

Contributing

PRs welcome. Before submitting: npm run test:all (typecheck, unit, Playwright, size).

License

MIT © Raju Dandigam