use-copy-feedback

A lightweight React hook to copy text to clipboard and show instant feedback like “Copied!”.
Perfect for buttons, tooltips, toast notifications, and more.

🚀 Features

• ✅ Simple API – Just copy(), copied, feedbackText, and optional reset()
• 🕒 Auto-reset after delay – Customizable with timeout option
• ⚙️ Highly customizable:
• successText – Text shown after successful copy
• resetText – Default text before copying
• autoReset – Disable auto reset and reset manually
• onCopy – Callback after successful copy
• 🧠 Built with React & TypeScript – Strongly typed for better DX
• 📦 Zero dependencies – Native Clipboard API used
• 🧪 Supports HTML/Text copy – Use format: "text/html" or "text/plain"
• 🔁 Manual Reset Option – Full control over feedback UI
• 🌐 Works with JS or TS projects

Installation

npm install use-copy-feedback

or

yarn add use-copy-feedback

or

pnpm add use-copy-feedback

License

MIT

MIT — Feel free to use, modify & contribute!

Badges

Add badges from somewhere like: shields.io

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

Hi, I'm Nitingoley! 👋

Support

For support, email [email protected] or connect me nitin__goley.

Usage/Examples

import { useCopyFeedback } from "use-copy-feedback";

export default function CopyButton() {
  const { copied, copy } = useCopyFeedback("Hello world!");

  return (
    <button onClick={copy}>
      {copied ? "✅ Copied!" : "📋 Copy"}
    </button>
  );
}


⚙️ Usage
Here's how to use use-copy-feedback in your React app:

iimport useCopyFeedback from "use-copy-feedback"

function App() {
  const { feedbackText, copy, reset } = useCopyFeedback("<b>Hello</b>", {
    format: "text/html",
    timeout: 2000,
    successText: "🔥 Text Copied!",
    resetText: "📋 Copy HTML",
    onCopy: () => console.log("User copied the content"),
    autoReset: false, // user must reset manually
  })

  return (
    <div>
      <button onClick={copy}>{feedbackText}</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}