DEV Community

Matias Fandiño
Matias Fandiño

Posted on

I built a 400B clipboard library for React (with an agnostic core)

🚀 I built a 400B clipboard library for React (with an agnostic core)

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.

So I built lite-clipboard.


What is lite-clipboard?

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 usage

import { useClipboard } from 'lite-clipboard';

function CopyButton({ text }) {
  const { copied, copy } = useClipboard();

  return (
    <button onClick={() => copy(text)}>
      {copied ? 'Copied!' : 'Copy'}
    </button>
  );
}
Enter fullscreen mode Exit fullscreen mode

Simple, reactive, and no boilerplate.

Framework-agnostic core

If you're not using React:

import { copy } from 'lite-clipboard/core';

await copy("Hello world");
Enter fullscreen mode Exit fullscreen mode

No framework required.

Why another clipboard library?

Most existing solutions are:

❌ Bigger than they need to be (1KB–2KB+)
❌ Not React-friendly (no state, no hooks)
❌ Missing TypeScript support
❌ Require manual state handling (setTimeout, etc.)

I wanted something:
✅ Minimal
✅ Modern
✅ React-friendly
✅ And reusable outside React

⚡ Features

🚀 ~400 bytes (React hook), ~250 bytes (core)
🔌 0 dependencies
⚛️ Built-in React state (copied, error, supported)
🔁 Auto-reset (no manual timers)
🎯 Callbacks (onSuccess, onError)
🧩 Framework-agnostic core
🌍 SSR safe
🧪 TypeScript-first

📦 Size comparison

Library Size Dependencies React Hook Agnostic
lite-clipboard ~0.4KB 0
clipboard.js ~2.4KB 1
copy-to-clipboard ~1.1KB 0 ⚠️

💡 Design philosophy

  • Core first → logic independent from frameworks
  • Thin adapters → React is just a wrapper
  • Minimal footprint → every byte matters
  • Better DX → less code, fewer bugs

🔗 Links

GitHub: https://github.com/matifandy8/lite-clipboard
npm: https://www.npmjs.com/package/lite-clipboard
Product Hunt (launch): https://www.producthunt.com/posts/lite-clipboard/maker-invite?code=QN3IzM

🚀 Support the launch

If you find it useful, I'd really appreciate your support on Product Hunt 🙌

Feedback, comments, or even just an upvote helps a lot!

Top comments (0)