React Tutorials

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>
    </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.



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.


I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Redux Handle API Calls with Thunk Middleware Tutorial

In this post, we will learn how to work with HTTP requests in the Redux…

1 day ago

Node AJAX Retrieve Records from MySQL Database Tutorial

MySQL is a relational database management system based on SQL – Structured Query Language, and…

4 days ago

React Manage REST API State Globally with Context API Tutorial

React Js Handle Rest API data globally with Context and useState hook tutorial. In this…

1 week ago

How to Delete Data from MySQL Database using Node Js

Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…

1 week ago

Node Import CSV File Data to MySQL Database with HTML Form

In this tutorial, you will discover how to import CSV file into MySQL database using…

2 weeks ago

How to Handle Global State in React js using Context API

React Js Global state management with createContext hook example; In this tutorial, we will help…

2 weeks ago