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>
</CopyToClipboard>
}</div>
</div >
);
}
export default App;
Open 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
Conclusion
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.