How to Copy Text to Clipboard Using ReactJS

 

Introduction

In this article, we will learn how to copy text to your clipboard using ReactJS. With this, we can copy any text to the clipboard and can paste it anywhere. 

You can check my previous article in which we discussed ReactJS and its basic components from the below-mentioned links.

• File Upload using ASP.NET Web API And ReactJS.
• Create User Registration And Login Using Web API And ReactJS.
• Internationalization In ReactJS Application Using i18Next.

Prerequisites

• Basic knowledge of React.
• Visual Studio Code IDE.
• Basic knowledge of Bootstrap and HTML.

Create a React Project

Let's first create a React application using the following command.

npx create-react-app platform  

Now, open the newly created project in Visual Studio Code and install Bootstrap by using the following command:
Shell
1
npm install --save bootstrap  

Now, open the index.js file and import Bootstrap.
Shell
1
import 'bootstrap/dist/css/bootstrap.min.css';

Now, install the copy-to-clipboard library using the following command:
Shell
1
npm install save copy-to-clipboard  

Now, go to the src folder, create a new component named CopyBoard.js, and add the following lines in this component.  
JavaScript
1
import React, { Component } from 'react'  
2
import copy from "copy-to-clipboard";  
3
import './CopyBoard.css';  
4
export class CopyBoard extends Component {  
5
        constructor() {  
6
                super();  
7
                this.state = {  
8
                        textToCopy: "Copy to Clipboard Demo!",  
9
  
10
                };  
11
                this.handleInputChange = this.handleInputChange.bind(this);  
12
                this.Copytext = this.Copytext.bind(this);  
13
        }  
14
  
15
        handleInputChange(e) {  
16
                this.setState({  
17
                        textToCopy: e.target.value,  
18
                });  
19
        }  
20
  
21
        Copytext() {  
22
                copy(this.state.textToCopy);  
23
                
24
        }  
25
  
26
        render() {  
27
                const { textToCopy, btnText } = this.state;  
28
                return (  
29
                        <div className="container">  
30
                                <div class="row" className="hdr">  
31
                                        <div class="col-sm-12 btn btn-info">  
32
                                                Copy to Clipboard Demo  
33
            </div>  
34
                                </div>  
35
                                <div className="txt">  
36
                                        <textarea className="form-control" placeholder="Enter Text" onChange={this.handleInputChange} />  
37
                                        <br />  
38
                                        <br />  
39
                                        <button className="btn btn-info" onClick={this.Copytext}>  
40
                                                Copy to Clipboard  
41
                    </button>  
42
                                </div>  
43
                           
44
                        </div>  
45
                );  
46
        }  
47
}  
48
  
49
export default CopyBoard  

Now, create a new CSS file and add the following CSS in this file.
CSS
1
.txt  
2
{  
3
        margin-bottom: 20px;  
4
      margin-top: 20px;  
5
}  
6
.hdr  
7
{  
8
        margin-top: 20px;  
9
}  

Now, open the App.js file and add the following code:
JavaScript
1
import React from 'react';  
2
import logo from './logo.svg';  
3
import './App.css';  
4
import CopyExample from './CopyBoard';  
5
function App() {  
6
  return (  
7
    <div className="App">  
8
      <CopyExample/>  
9
    </div>  
10
  );  
11
}  
12
  
13
export default App; 

Then, we can run the project and check the result.
Enter some text in the textbox and click on the button  
Now, the text is copied. We can paste the text in Notepad.
Summary
In this article, we learned how we can copy text to the clipboard in ReactJS applications