An easy way for adding Copy to Clipboard functionality in React App

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.

Comments

[Yair Even Or]

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