An easy way for adding Copy to Clipboard functionality in React App
Tags: javascript, react, codenewbie
Published: 2021-01-25 08:59:05

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](https://www.npmjs.com/package/react-copy-to-clipboard).

![React Copy To Clipboard](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/8a8dbf922fe4d4f4b860b8c962d8cdf47e51f081/copy-clipboard.png)

It's a very popular npm library that is built on top of another popular javascript [copy-to-clipboard](https://www.npmjs.com/package/copy-to-clipboard) library.

## Installation

To install the library execute the following command from the terminal:

```js
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](https://www.npmjs.com/package/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: 

{% codesandbox affectionate-butterfly-tbquf%}

Here's the complete code:

```jsx
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:

```js
 <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. 

![Demo1](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/8a8dbf922fe4d4f4b860b8c962d8cdf47e51f081/copied_1.gif)

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:

{% codesandbox hungry-jones-bgp4t %}

Here's a complete code:

```jsx
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.

![Demo 2](https://gist.github.com/myogeshchavan97/aa75611665802aadfd3ba6bfeb0fe59b/raw/8a8dbf922fe4d4f4b860b8c962d8cdf47e51f081/copied_2.gif)

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](https://yogeshchavan.podia.com/react-router-introduction) course If you have not joined it yet. 

Subscribe to my [weekly newsletter](https://yogeshchavan.dev/) to join 1000+ other subscribers to get amazing tips, tricks, articles and discount deals directly in your inbox.

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)