React Copy Tooltip

A React component for copying text to the clipboard with tooltip feedback. Simple, customizable, and easy to use in any React project.

Features

• Copy any text to clipboard with a single click
• Tooltip feedback for user confirmation
• Customizable button and tooltip
• Lightweight and dependency-free (except React)

Installation

npm install react-copy-tooltip

or

yarn add react-copy-tooltip

Usage

import React from "react";
import { CopyToClipboard } from "react-copy-tooltip";

function App() {
  return (
    <div>
      <h2>Copy Example</h2>
      <CopyToClipboard text="Hello, world!">
        <button>Copy Text</button>
      </CopyToClipboard>
    </div>
  );
}

export default App;

Props

Prop	Type	Required	Default	Description
text	string	Yes	—	The text to copy to the clipboard.
children	ReactNode	Yes	—	The element to trigger copy (e.g. a button).
bgColor	string	No	#333	Background color of the tooltip.
textColor	string	No	#fff	Text color of the tooltip.
className	string	No	—	Custom class name for the tooltip for additional styling.
tooltipText	string	No	Copied!	Custom tooltip text shown after copying.

Example

<CopyToClipboard
  text="Copied from demo!"
  tooltipText="Copied!"
  bgColor="#222"
  textColor="#fff"
  className="my-tooltip"
>
  <button>Copy This</button>
</CopyToClipboard>

License

MIT