React 18 Copy Text to Clipboard Example Tutorial

Last Updated on by in React JS

In React, adding copy text to clipboard functionality is super easy easy.

Copying text to the clipboard is a basic and must have functionality in React web application development.

In this guide, we will explore different methods to copy text to the clipboard in a React.js application.

We will use a functional component to create copy text to a clipboard on a button click in React. In the following code example we will use react-copy-to-clipboard package and useState() hook.

We will show you intuitive approach that will help you implement copy text to a clipboard in React from absolute scratch.

Let us explore, how to copy text from an HTML element (button, div) to the clipboard in react application using the external npm plugin.

How to Create React Copy Text 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

Create a new react app using the npx create react app command.

npx create-react-app react-ctc-demo

Head over to project folder:

cd react-ctc-demo

Install The Pacakge

Type the following command in the console, hit enter and start installing the react-copy-to-clipboard package.

npm install react-copy-to-clipboard --legacy-peer-deps

Create React Copy to Clipboard Feature

You have to import the CopyToClipboard module into the react functional 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 the file and update the following code in src/App.css file:

.discount-applied {
  border-color: red !important;
  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

Copy to Clipboard UI in React

Conclusion

The react copy text to clipboard example is over. In this immaculate guide, we went over every process bit by bit, and managed to explain 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.

Reference: https://www.npmjs.com/package/react-copy-to-clipboard

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.