React Copy Text to Clipboard Example Tutorial

In this quick step by step guide, we will learn how to create copy text string from the clipboard user interface element in react application using the third party react-copy-to-clipboard plugin.

In this simple and quick example we will create a copy to the clipboard UI component for the black Friday discount, and it will have a tiny copy button with a text string (discount code). When the user clicks on the copy button, then the discount code will be copied from the clipboard.

How to Create React Copy to Clipboard Component

• Step 1: Set Up React Project
• Step 2: Add React Copy to Clipboard Plugin
• Step 3: Create React Copy to Clipboard Feature
• Step 4: Start React App

Set Up React Project

In the first step, open the terminal and run the command to create a new react app using the npx create react app.

npx create-react-app react-ctc-demo

Head over to project folder:

cd react-ctc-demo

Add React Copy to Clipboard Plugin

Further, again type the following command in the console and start installing the react-copy-to-clipboard package.

npm install react-copy-to-clipboard

Create React Copy to Clipboard Feature

You can create copy to clipboard feature by importing the CopyToClipboard module into the react component.

import { CopyToClipboard } from 'react-copy-to-clipboard';

The state prop is being used to ensure whether the discount code is copied or not; similarly, the return function holds the complete copy to the clipboard react component.

Head over to the src/App.js file; likewise, add the complete code to create the feature.

import React, { useState } from "react";
import { CopyToClipboard } from 'react-copy-to-clipboard';
import './App.css';

function App() {
  
  const [copied, setCopied] = useState(false);
  const discount = 'Black Firday Discount 59%';

  return (
    <div className="App">
      <h3>Black Friday Discount</h3>
      <div className={copied ? 'discount-code discount-applied' : 'discount-code'} >
        <div className="black-code">{discount}</div>{
          copied ? <div className="discount-copied">Copied!</div>:
            <CopyToClipboard text={discount} onCopy={() => setCopied(true)}>
              <div className="copy">Copy</div>
            </CopyToClipboard>
        }</div>
    </div >
  );

}

export default App;

Open and update the following code in src/App.css file:

.discount-applied {
  border-color: red ;
  background: #fffdb4;
}

.discount-code {
  border: 2px dotted #535151;
  min-width: 300px;
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
}

.black-code {
  padding: 18px;
  float: left;
  display: inline-block;
}

.copy {
  color: blue;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  top: 5px;
}

.discount-copied {
  font-size: 16px;
  position: relative;
  top: 5px;
  padding: 16px;
  display: inline-block;
  color: blue;
}

Start React App

To test the feature we have just created, run the command to start to react app:

npm start

You can now see the react app in the browser.

http://localhost:3000

Conclusion

The react copy text to clipboard example is over; this immaculate guide, bit by bit, explained how to use the react-copy-to-clipboard package in react app to create copy to clipboard functionality.

We hope you would like this tutorial and share it with others.