How To Copy Text To Clipboard In React JS

Websolutionstuff | Aug-31-2022 | Categories : React JS

In this article, we will see how to copy text to the clipboard in react js. you will learn how to copy text to your clipboard using react js. Many apps have a copy-to-clipboard button to copy text. So that you can copy the text easily. And you can paste copy text anywhere you want.

So, let's see a copy to clipboard react js or javascript copy to clipboard react

Step 1: Create React App

Step 2: Install Copy to Clipboard and Bootstrap 4 Package

Step 3: Create Copy Clipboard Component

Step 4: Add Component in App.js

 

Step 1: Create React App

In this step, we will create a new react app.

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal.

npm start

 

 

Step 2: Install Copy to Clipboard and Bootstrap 4 Package

In this step, we will install react copy to the clipboard and bootstrap 4 libraries into react app.

npm install bootstrap --save
npm install save copy-to-clipboard

Then, Add react router and bootstrap.min.css file in src/App.js the file.

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
function App() {
  return (
    <div>
      <h2>How To Copy Text To Clipboard In React JS - Websolutionstuff</h2>
    </div>
  );
}
 
export default App;

 

Step 3: Create Copy Clipboard Component

In this step, we will create a copy text to the clipboard component named clipboard.js.

import React, { Component } from "react";
 
import copy from "copy-to-clipboard";
 
import "./App.css";
 
Class CopyBoard extends Component {
 
  constructor() {
    super();
 
    this.state = {
      textToCopy: "Copy to Clipboard Demo!",
    };
 
    this.handleInputChange = this.handleInputChange.bind(this);
 
    this.Copytext = this.Copytext.bind(this);
  }
 
  handleInputChange(e) {
    this.setState({
      textToCopy: e.target.value,
    });
  }
 
  Copytext() {
    copy(this.state.textToCopy);
  }
 
  render() {
    const { textToCopy, btnText } = this.state;
 
    return (
      <div className="container">
        <div class="row" className="hdr">
          <div class="col-sm-12 btn btn-info">How To Copy Text To Clipboard In React JS</div>
        </div>
 
        <div className="txt">
          <textarea
            className="form-control"
            placeholder="Enter Text"
            onChange={this.handleInputChange}
          />
 
          <br />
 
          <br />
 
          <button className="btn btn-info" onClick={this.Copytext}>
            Copy to Clipboard
          </button>
        </div>
      </div>
    );
  }
}
 
export default CopyBoard;

Now, Open the app.css file and add the following CSS to this file.

.txt  
{  
   margin-bottom: 20px;  
   margin-top: 20px;  
}  
 
.hdr  
{  
  margin-top: 20px;  
}  

 

 

Step 4: Add Component in App.js

In this step, you need to add the clipboard.js file to src/App.js the file.

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Clipboard from './Clipboard'
 
function App() {  
     
  return (  
    <div className="App">  
      <Clipboard />  
    </div>  
  );  
}  
 
export default App;

 


You might also like:

Recommended Post
Featured Post
How To Store Backup On Dropbox In Laravel 9
How To Store Backup On Dropbox...

In this article, we will see how to store the backup on dropbox in laravel 9. Here, we will learn to store database...

Read More

Jan-16-2023

How To Create Bar Chart In Laravel 9 Using Highcharts
How To Create Bar Chart In Lar...

In this article, we will see how to create a bar chart in laravel 9 using highcharts. A bar chart or bar graph is a...

Read More

Oct-05-2022

Laravel 9 Foreach Loop Variable Example
Laravel 9 Foreach Loop Variabl...

In this article, we will see laravel 9 foreach loop variable example. Laravel provides a simple blade template...

Read More

Jul-22-2022

How To Get Current User Location In Laravel
How To Get Current User Locati...

In this example, I will show you how to get the current user location in laravel, Many times we are required to find the...

Read More

Jun-10-2020