Introducing Easy Copy Tooltip 

If you are a React or Next.js developer, you have probably built a "Click to Copy" button at least five times.

The process is always the same:

1. Create a useState for the "Copied" status.

2. Write the navigator.clipboard.writeText() function.

3. Add a setTimeout to reset the state.

4. Build a tooltip or badge to show the user it worked.

5. Realize you forgot to handle errors or accessibility.

It is boring, repetitive boilerplate. So, I decided to package it up properly.

Introducing easy-copy-tooltip

I just published easy-copy-tooltip, a lightweight, production-ready React component that handles all of this for you.

It’s built with TypeScript and Tailwind CSS, and it works seamlessly in Next.js (App Router), Vite, and standard React apps.

Key Features

• Zero Logic: No more writing navigator.clipboard or setTimeout manually.

• Built-in Tooltip: A clean "Copied!" pop-up appears automatically on click.

• Hover Effects: Shows "Click to copy" on hover, and "Copied!" on click.

• Dark Mode Support: Automatically adapts to your Tailwind dark mode settings.

• Next.js Ready: Includes the "use client" directive out of the box.

How to use it

1. Install

It's tiny and available on npm, pnpm, yarn and bun.

Bash

npm install easy-copy-tooltip

bash

pnpm add easy-copy-tooltip

bash

bun add easy-copy-tooltip

bash

yarn add easy-copy-tooltip

2. Wrap your content

That’s it. Just import it and wrap whatever element you want to be clickable.

TypeScript

import EasyCopy from "easy-copy-tooltip";

export default function Home() {
  return (
    <div className="min-h-screen flex flex-col gap-10 justify-center items-center">
      <EasyCopy
        value="npm install next-themes"
        copiedLabel="Copied 🎉"
        copyLabel="Copy command"
      >
        <code>next-themes</code>
      </EasyCopy>
    </div>
  );
}

Why did I build this?

I found myself copy-pasting the same handleCopy function into every new project. I wanted a solution that was "install and forget."

The library handles the cleanup timers, the ARIA accessibility roles, and the conditional styling so you don't have to.

Try it out!

You can check out the source code or download it here:

•  NPM: npmjs.com/package/easy-copy-tooltip