React 16+ Copy to Clipboard Tutorial with UI Design Example

In this React 16+ tutorial, we’ll discuss how to implement functionality to copy string data from any element or container on DOM by clicking a button using the react-copy-to-clipboard package.

Click to copy is functionality is found where we have some text of information that is available for users to copy like promotion codes, message text with ID’s or code which can be used as it is.

In that case, it’s very handy to add a copy button so that users don’t need to right-click or press keyboard shortcuts.

Here we’ll discuss how to easily implement similar features in the React application by using the react-copy-to-clipboard package.

 

Create a React Application

First, we’ll create a new React application using npx create-react-app command

$ npx create-react-app react-copy-to-clipboard-app

Move inside the react app

$ cd react-copy-to-clipboard-app

Run application

$ npm start

 

Install react-copy-to-clipboard-app Package

After creating the React application ready, install the react-copy-to-clipboard-app package by running below npm command

$ npm install react-copy-to-clipboard

 

Using Clipboard Feature in Component

To apply copy to clipboard feature, we need to import the CopyToClipboard component then use it to get the text we want to copy.

Also, we will wrap the button or element on the click of which the defined text will be copied.

<CopyToClipboard text={'Text to be copied!'} onCopy={() => isCopied(true)}>
    <button>Copy</button>
</CopyToClipboard>

The text property takes the string of text we want to copy. It can be dynamic or something static.

The onCopy() event handler is triggered when any element inside the <CopyToClipboard> component is clicked by user actions.

 

Copy Coupon Code Example

Let’s create an example, by using this component. In the App.js function component import the CopyToClipboard

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

Now define state to checked if coupon is copied as a boolean and a const to keep text need to be copied

const [copied, setCopied] = useState(false);
 const couponValue = 'FREAKYDISCOUNT 50%';

In the return, function add the following template to render

     <h4>Today's Lucky Coupon</h4>

      <div className={copied ? 'lucky-coupon coupon-applied' : 'lucky-coupon'} >
        <div className="lucky-coupon-code">{couponValue}</div>
        {
          copied ? <div className="coupon-copied">Copied!</div>
            :
            <CopyToClipboard text={couponValue} onCopy={() => setCopied(true)}>
              <div className="copy-code">✂️</div>
            </CopyToClipboard>
        }

      </div>

 

So finally the App.js file will look like this:

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

function App() {

  const [copied, setCopied] = useState(false);
  const couponValue = 'FREAKYDISCOUNT 50%';


  return (
    <div className="App">

      <h4>Today's Lucky Coupon</h4>

      <div className={copied ? 'lucky-coupon coupon-applied' : 'lucky-coupon'} >
        <div className="lucky-coupon-code">{couponValue}</div>
        {
          copied ? <div className="coupon-copied">Copied!</div>
            :
            <CopyToClipboard text={couponValue} onCopy={() => setCopied(true)}>
              <div className="copy-code">✂️</div>
            </CopyToClipboard>
        }

      </div>

    </div >
  );
}

export default App;

 

In the App.css file also add following css style

.coupon-applied {
  border-color: green !important;
  background: #bdffb4;
}
.lucky-coupon {
  border: 5px dashed #ccc;
  width: 320px;
  display: inline-block;
  font-size: 1.2em;
}

.lucky-coupon-code {
  padding: 15px;
  display: inline-block;
  float: left;
  font-weight: bold;
}

.copy-code {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.coupon-copied {
  padding: 13px 0px;
  display: inline-block;
  color: green;
  font-size: 19px;
}

 

That’s it now you have a working example of functionality to copy test on button click in the React application using the react-copy-to-clipboard package.

 

Source Code

Find the source code of this application in my GitHub repository here.

 

Conclusion

Here we discussed how to easily implement copy the text feature by installing the react-copy-to-clipboard package. We also created a sample application to copy coupon codes. This feature can be used in many places like addresses, phone numbers, order details, offer coupons, some texts, etc.