React Copy Text to Clipboard Example

In this article, you will explore how to copy text to the clipboard using the React js application using copy-to-clipboard.

How to Copy Text to Clipboard Using ReactJS

Here is an example of creating copy functions in your React application components.

Step 1 – Create React App

Run the following command on your cmd to create a new react app:

npx create-react-app my-react-app

To run the React app:

npm start

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

Step 2 – Install Copy to Clipboard and Bootstrap

Run the following commands to install react copy to clipboard and bootstrap library into your react app:

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

Set up react-router and 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

Navigate to the src directory of your react js app, and 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">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 Component in App.js

In this step, you need to add clipboard.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

That’s it, you have learn how to copy text to your clipboard using React JS using save copy-to-clipboard.

Recommended React Posts