In this article, we will see how to use the most popular React library for adding copy to clipboard functionality in React app.
The library I'm talking about is react-copy-to-clipboard.
It's a very popular npm library that is built on top of another popular javascript copy-to-clipboard library.
Installation
To install the library execute the following command from the terminal:
npm install react-copy-to-clipboard
Using the library
The library provides a CopyToClipboard
component that accepts the following props:
-
text
: The text that needs to be copied to the clipboard. It's a required prop -
onCopy
: An optional callback function that will be executed after a successful copy operation -
options
: optional options that the copy-to-clipboard library accepts
In between the opening and closing
CopyToClipbard
tag, we define the content that will trigger the copy functionality.
Take a look at the below Code Sandbox Demo:
Here's the complete code:
import { useState } from "react";
import { CopyToClipboard } from "react-copy-to-clipboard";
import "./styles.css";
export default function App() {
const [text, setText] = useState("");
const [isCopied, setIsCopied] = useState(false);
const onCopyText = () => {
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, 1000);
};
return (
<div className="container">
<input
type="text"
value={text}
placeholder="Type some text here"
onChange={(event) => setText(event.target.value)}
/>
<CopyToClipboard text={text} onCopy={onCopyText}>
<div className="copy-area">
<button>Copy to Clipboard</button>
<span className={`copy-feedback ${isCopied ? "active" : ""}`}>
Copied!
</span>
</div>
</CopyToClipboard>
</div>
);
}
Here, the user entered input is stored in the state with name text
and the same value we're passing to the CopyToClipboard
component as a text
prop:
<CopyToClipboard text={text} onCopy={onCopyText}>
So when the button is clicked, the onCopy
function will be triggered that will call our custom onCopyText
function to set the isCopied
state value and based on the isCopied
state value, we're showing the feedback to the user.
Inside the onCopyText
function, we set the isCopied
state value to true so the Copied!
text will be displayed to the user and after 1 second (1000ms) we reset the state value to false so the Copied!
text will disappear.
As you can see above, the text entered into the input field is correctly copied into the clipboard.
Take a look at the below Code Sandbox Demo:
Here's a complete code:
import { useState } from "react";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { MdContentCopy } from "react-icons/md";
import "./styles.css";
export default function App() {
const [isCopied, setIsCopied] = useState(false);
const codeSnippet = `
const a = 10, b = 20;
const sum = a + b;
console.log(sum);
`;
const onCopyText = () => {
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, 1000);
};
return (
<div className="container">
<div className="code-snippet">
<div className="code-section">
<pre>{codeSnippet}</pre>
<CopyToClipboard text={codeSnippet} onCopy={onCopyText}>
<span>{isCopied ? "Copied!" : <MdContentCopy />}</span>
</CopyToClipboard>
</div>
</div>
</div>
);
}
In the demo, we've implemented the copy functionality for the snippet of code.
So from these two demos, you now have a clear idea of how to easily implement the copy to clipboard functionality in React.
That's it about this article. I hope you found it useful.
Join my highly popular FREE Introduction to React Router course If you have not joined it yet.
Subscribe to my weekly newsletter to join 1000+ other subscribers to get amazing tips, tricks, articles and discount deals directly in your inbox.
Top comments (1)
You don't need a React component for a non-visual functionality, you can do all this with very little lines of code instead of importing yet another component
Some comments have been hidden by the post's author - find out more