π 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-clipboardUsage
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.