📋 react-use-clipboard
A React Hook that provides copy to clipboard functionality.
Install
You can install react-use-clipboard
with NPM or Yarn.
npm install react-use-clipboard --save-exact
yarn add react-use-clipboard --exact
We encourage pinning the version number until react-use-clipboard
reaches 1.0.0
. We may ship breaking changes in 0.x.x
versions.
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", {
successDuration: 1000
});
return (
<button onClick={setCopied}>
Was it copied? {isCopied ? "Yes! 👍" : "Nope! 👎"}
</button>
);
}
This package only works in versions of React that support Hooks.