📋 react-use-clipboard

A React Hook that provides copy to clipboard functionality.

Install

You can install react-use-clipboard with npm, Yarn, or pnpm.

npm install react-use-clipboard
yarn add react-use-clipboard
pnpm install react-use-clipboard

Usage

Here's how to use react-use-clipboard:

import useClipboard from "react-use-clipboard";

function App() {
  const [isCopied, setCopied] = useClipboard("Text to copy");

  return (
    <button onClick={setCopied}>
      Was it copied? {isCopied ? "Yes! 👍" : "Nope! 👎"}
    </button>
  );
}

You can reset the isCopied value after a certain amount of time with the successDuration option.

import useClipboard from "react-use-clipboard";

function App() {
  const [isCopied, setCopied] = useClipboard("Text to copy", {
    // `isCopied` will go back to `false` after 1000ms.
    successDuration: 1000,
  });

  return (
    <button onClick={setCopied}>
      Was it copied? {isCopied ? "Yes! 👍" : "Nope! 👎"}
    </button>
  );
}

This package only works in versions of React that support Hooks.