I built a 400B clipboard library for React (with an agnostic core)
Source: Dev.to
Introduction
Copying to the clipboard sounds simple… until you try to do it properly.
Permissions, async APIs, browser quirks, and UI feedback quickly turn something that should be one line into unnecessary boilerplate.
lite-clipboard is a tiny, zero‑dependency clipboard library with a framework‑agnostic core and a React hook on top.
- Use the core anywhere (vanilla JS, Vue, Svelte, etc.)
- Use the hook for a clean React experience
React Hook
import { useClipboard } from 'lite-clipboard';
function CopyButton({ text }) {
const { copied, copy } = useClipboard();
return (
copy(text)}>
{copied ? 'Copied!' : 'Copy'}
);
}Simple, reactive, and no boilerplate.
Core (Framework‑agnostic)
If you’re not using React:
import { copy } from 'lite-clipboard/core';
await copy("Hello world");No framework required.
Comparison
| Library | Size | Dependencies | React Hook | Agnostic Core |
|---|---|---|---|---|
| lite-clipboard | ~0.4 KB | 0 | ✅ | ✅ |
| clipboard.js | ~2.4 KB | 1 | ❌ | ❌ |
| copy-to-clipboard | ~1.1 KB | 0 | ❌ | ⚠️ |
- Core first → logic independent from frameworks
- Thin adapters → React is just a wrapper
- Minimal footprint → every byte matters
- Better DX → less code, fewer bugs
Features
- ~400 bytes for the React hook, ~250 bytes for the core
- Zero dependencies
- Async API with proper permission handling
- Small bundle size for fast loading
Links
- GitHub:
- npm:
- Product Hunt:
If you find it useful, I’d really appreciate your support on Product Hunt 🙌. Feedback, comments, or even just an upvote helps a lot!