How to Copy Text to Clipboard Using ReactJS

React js copy text to clipboard example; In this tutorial, i am going to show you from scratch on how to copy text to your clipboard using React JS.

When you save text to the clipboard on your Android, the clipboard service stores the information in RAM. On stock Android phones, you can’t access that data directly. On Samsung phones, the clipboard history exists in a file in the /data/Clipboard directory.

React Copy Text to Clipboard Example

  • Step 1 – Create React App
  • Step 2 – Install Copy to Clipboard and Bootstrap 4 Package
  • Step 3 – Create Copy Clipboard Component
  • Step 4 – Import Copy Clipboard Component in App.js

Step 1 – Create React App

Open your terminal and execute the following command on your terminal to 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

Check out your React app on this URL: localhost:3000

Step 2 – Install Copy to Clipboard and Bootstrap 4 Package

eExecute the following commands to install react copy to clipboard and boostrap 4 library into your react app:

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

Then import bootstrap.min.css file in src/App.js 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 Using ReactJS</h2>
    </div>
  );
}
export default App;

Step 3 – Create Copy Clipboard Component

Go to the src directory of your react js app and implement a copy text to the clipboard component named clipboard.js. And add the following code into it:

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">Copy to Clipboard Demo</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 app.css file and add the following CSS in this file:

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

Step 4 – Import Copy Clipboard Component in App.js

Then import CopyBoard.js file in src/App.js 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;

Conclusion

React js copy text to clipboard example. In this tutorial, you have learn how to copy text to your clipboard using React JS using save copy-to-clipboard.

Recommended React Posts

Leave a Comment