React Copy Text To Clipboard Tutorial Example

Friends, in this tutorial, we will learn how to create copy text string from the clipboard user interface element in the React app using the third party react-copy-to-clipboard plugin.

Throughout the whole example, we will create a copy to the clipboard UI component for the black friday discount which will be having a tiny copy button with text string (discount code). The discount code will be copied from the clipboard as soon as the user clicks on the copy button.

How To Create React Copy To Clipboard Component

See the below-given steps for implementing the react copy to clipboard feature:

Step 1: The very first step is to open the terminal and run the given command to create a new react app using the npx create react app.

npx create-react-app react-copy-2-clipboard-demo

 

Head over to the project folder:

cd react-copy-2-clipboard-demo

Step 2: The second step is to add React copy to clipboard plugin. Now, type the following command in the console and then start installing the copy-to-clipboard package.

npm install react-copy-to-clipboard

 

Step 3: Afterward, we create the 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; likewise, the return function holds complete copy to the clipboard react component.

 

Head over to the src/App.js: similarly, 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;

 

Now, open and update the below-given 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;
}

 

Step 4:  The final step is to run the command to start then react app so that we can test the feature that we have created.

npm start

 

Conclusion

So, we reach the end of this step by step guide in which we have learned how to add and implement the copy-to-clipboard package in the react app to create the copy to clipboard functionality.