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

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • MyrinNew
    Senior Member
    • Feb 2024
    • 5175

    #1

    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>
    );
    }







    Simple, reactive, and no boilerplate.


    Framework-agnostic core

    If you're not using React:






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

    await copy("Hello world");







    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

    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/li...te?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!




    More...
Working...