React Copy Text to Clipboard Example

React js is enables developers to create dynamic and interactive user interfaces with ease. One of the many features that React offers is the ability to copy text to the clipboard with just a few lines of code. In this article, you will explore how to copy text to the clipboard using React and discuss some of the use cases where this feature can be handy.

Copying text to the clipboard has always been a common use case in web development. This feature can be useful for a wide range of purposes, from copying a user’s email address or phone number to copying a shareable link or a code snippet. Before we dive into how to implement this feature in React, let’s take a brief look at how text can be copied to the clipboard in vanilla JavaScript.

How to Copy Text to Clipboard Using ReactJS

Just follow the following steps and to copy text to your clipboard using React JS:

• 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, 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

In this step, execute 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, Add 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

In this step, visit the src directory of your react js app and create 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;  
}  

The above given code is a JavaScript file that defines a React component named CopyBoard.

The code imports React, Component class from react module, and copy function from copy-to-clipboard module. The import "./App.css" line imports a CSS file that contains styles for the component.

The CopyBoard class extends the Component class, and its constructor sets the initial state of the component’s textToCopy to “Copy to Clipboard Demo!” using the setState method. The handleInputChange method updates the component’s state when the user enters text in the textarea. The Copytext method uses the copy function to copy the textToCopy state to the clipboard.

The render method returns JSX that defines the component’s UI. It contains a div element with a class of “container”, which contains two div elements, one with a class of “hdr” and the other with a class of “txt”. The “hdr” div contains a button with the text “Copy to Clipboard Demo”. The “txt” div contains a textarea where the user can enter text and a button that, when clicked, calls the Copytext method to copy the entered text to the clipboard.

Finally, the export default CopyBoard; statement exports the CopyBoard component as the default export of the module, allowing it to be imported and used in other parts of the application.

Step 4 – Add 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

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