How to Create React Copy Text to Clipboard UI

React copy to clipboard tutorial; this tutorial describes how to build copy text to clipboard feature in react application using the npm react-copy-to-clipboard package.

We will implement a simple feature that mainly copies content from HTML or document object model simply by clicking on a tiny button. This type of feature is known as a copy to clipboard, and we will also design this tiny copy to clipboard UI using CSS.

You will be using HTML to create a small box containing the phone number and a small copy button; if the user clicks on the small copy button, then string data will be copied, and you can paste the number elsewhere.

React Copy to Clipboard UI Example

  • Step 1: Install React App
  • Step 2: Install react-copy-to-clipboard Package
  • Step 3: Implement Copy to Clipboard in React
  • Step 4: Run Development Server

Install React App

The given below npx command allows you to create a new react app, avoid this step if app is already created.

npx create-react-app react-app

cd react-app

Install react-copy-to-clipboard Package

In the next step, you have to execute the following command from the terminal and install the react-copy-to-clipboard package into the react app.

npm install react-copy-to-clipboard

Implement Copy to Clipboard in React

We can now add the copy to the clipboard in react app; make sure to import CopyToClipboard from the ‘react-copy-to-clipboard’ package. After that, import the app CSS, and don’t forget to add the following code in the app template.

Open and update code in src/App.js:

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

function App() {
  
  const [stringCopied, initCopied] = useState(false);
  
  const phone = '+91 0123456789';

  return (
    <div className="App">
      <div className={stringCopied ? 'phone-code phone-applied' : 'phone-code'} >
        <div className="tel-code">{phone}</div>{
          stringCopied ? <div className="phone-copied">Phone no copied!</div>:
            <CopyToClipboard text={phone} onCopy={() => initCopied(true)}>
              <div className="copy">Copy</div>
            </CopyToClipboard>
        }</div>
    </div >
  );

}

export default App;

We can now style the copy to clipboard component, and you can add style by adding the following CSS code inside the src/App.css:

.phone-applied {
  border-color: rgb(213, 46, 46) !important;
  background: #fff70b;
}

.phone-code {
  font-size: 23px;
  min-width: 250px;
  font-weight: 700;
  display: inline-block;
  border: 3px dotted #ccc;
}

.tel-code {
  float: left;
  padding: 20px;
  display: inline-block;
}

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

.phone-copied {
  top: 5px;
  color: teal;
  padding: 18px;
  font-size: 18px;
  position: relative;
  display: inline-block;
}

Run Development Server

We have almost reached the last step; however, the most important thing is to test out what we have built so far. You can type the command on the terminal and execute the command to run the react application:

npm start

Type the url on the browser to view the app:

http://localhost:3000

React Copy to Clipboard UI Example

Conclusion

This tutorial is just ended; we have raised the curtain from the secret of integrating copy to clipboard functionality in React application with the help of the npm package.

We built a simple feature from where user can copy text-based phone numbers; however, you can use it for other purposes as well.