Copy text to the Clipboard in React without a package

Today we’ll show you how to copy text to the clipboard in React without a package. In the previous article we show you how to Copy text to the Clipboard in ReactJS using NPM Package.

Let’s take an example where we will render the textbox and button component to perform the demo.

Steps: Copy text to the clipboard

1. Create react app
2. Design a page
3. Implement logic for copy text to the clipboard
4. Output

1. Create react app

First, we will have a simple react application. For that use the following command to set up the startup react application.

npx create-react-app copy-text-clipboard-without-package

2. Design a page

To design a page, we will use the textarea for entering the text and button for copy to clipboard.

App.js

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Copy text to the Clipboard in React without a package - Clue Mediator"
    }
  }

  // handle copy to clipboard
  copyToClipboard = e => {

  };

  render() {
    return (
      <div>
        <h3>Copy text to Clipboard - <a href="https://www.cluemediator.com">Clue Mediator</a></h3>
        <textarea value={this.state.message} onchange="{e" ==""> this.setState({ message: e.target.value })}
        />
        <br />
        <br />
        <button onClick={this.copyToClipboard}>Copy to Clipboard</button>
      </div>
    );
  }
}<p></p>export default App;
</pre><p></p>
<h3 id="ilfctttc">3. Implement logic for copy text to the clipboard</h3>
<p>Let’s do a couple of changes in the `App` component to implement the logic. Use the `ref` attribute for `textarea` to invoke the select method. Manage the state variable for button click to show the text has been copied. At last write a logic for copy text to clipboard on click event of the button.</p><p></p><p class="file">App.js</p><p></p><pre>
import React, { Component } from "react";<p></p>class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Copy text to the Clipboard in React without a package - Clue Mediator",
      btnText: "Copy to Clipboard"
    }
  }<p></p>  // handle copy to clipboard
  copyToClipboard = e => {
    this.refs.textArea.select();
    document.execCommand('copy');
    e.target.focus();
    this.setState({ btnText: 'Copied!' });
  };<p></p>  render() {
    const { message, btnText } = this.state;
    return (
      <div>
        <h3>Copy text to Clipboard - <a href="https://www.cluemediator.com">Clue Mediator</a></h3>
        <textarea
          ref="textArea"
          value={message}
          onChange={e => this.setState({ message: e.target.value, btnText: "Copy to Clipboard" })}
        />
        <br />
        <br />
        {document.queryCommandSupported('copy') && <button onClick={this.copyToClipboard}>{btnText}</button>}
      </div>
    );
  }
}<p></p>export default App;
</pre><p></p><p>Here we have used the <a href="/logical-and-operator-in-reactjs" title="Logical AND Operator">Logical AND Operator</a> to display the button.</p><p></p><h3 id="output">4. Output</h3>
<!-- /wp:html --><p></p><!-- wp:image {"id":2606,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.cluemediator.com/wp-content/uploads/2020/08/output-copy-text-to-the-clipboard-in-react-without-a-package-clue-mediator-1024x253.gif" alt="Output - Copy text to the Clipboard in React without a package - Clue Mediator" class="wp-image-2606"/><figcaption>Output - Copy text to the Clipboard in React without a package - Clue Mediator</figcaption></figure>
<!-- /wp:image --><p></p><!-- wp:html -->
<p>That’s it for today.<br />Thank you for reading. Happy Coding..!!</p><p></p><h3 class="demo-source">Demo & Source Code</h3>
<a href="https://github.com/cluemediator/copy-text-clipboard-without-package" class="download git-repo-icon" target="_blank" rel="nofollow noopener noreferrer">Github Repository</a>
<a href="https://stackblitz.com/edit/copy-text-clipboard-without-package" class="download stackblitz-project-icon" target="_blank" rel="nofollow noopener noreferrer">StackBlitz Project</a>
<!-- /wp:html --></textarea></div>