← coderrocketfuel.com

How to Copy Text to The Clipboard in React.js

A common feature on websites is to offer a way to Copy To Clipboard so users can copy and paste content within their local system and outside of the browser. Implementing this in React is relatively straightforward by using the document.execCommand("copy") method.

In this article, we'll walk through how to allow a user to copy a <textarea> value to the clipboard by pressing a button. And we'll also show you how to display a success message when the value has successfully been added to the user's clipboard.

Let's get started!

Table of Contents

Copy a Textarea's Value to the Clipboard

As an example, we'll create some React code that will copy a <textarea> value to the clipboard by pressing a button.

This method will also work for other types of elements besides a <textarea>.

We'll give you the full code and explain everything afterward.

Here's what the code looks like:

import React, { Component } from "react"

export default class YourComponent extends Component {
  copyCodeToClipboard = () => {
    const el = this.textArea
    el.select()
    document.execCommand("copy")
  }

  render() {
    return (
      <div>
        <div>
          <textarea
            ref={(textarea) => this.textArea = textarea}
            value="Example copy for the textarea."
          />
        </div>
        <div>
          <button onClick={() => this.copyCodeToClipboard()}>
            Copy to Clipboard
          </button>
        </div>
      </div>
    )
  }
}

The first thing we do is create a React component called YourComponent and set it up to be default export for the file.

Then, we create a function name copyCodeToClipboard that will handle our Copy to Clipboard functionality. Inside that function, we hold the <textarea> element in an el variable and select its value with the el.select() method.

And with the value selected, we use the document.execCommand("copy") method to copy the value to the user's clipboard.

Inside the return() function for our component, we first create a <textarea>. We give it both a ref and value attribute. The ref attribute is what we'll use to access the <textarea> DOM element in our copyCodeToClipboard function. And the value is what we'll copy to the clipboard.

The last thing we add is a <button> element that calls the document.execCommand("copy") method when it's clicked via the onClick() function.

Once you've saved your file, try out the code in your browser. When you click the Copy to Clipboard button, the value will be copied to your clipboard.

Display Success Messaging

One update to our original code is to show a success message when the value of the <textarea> is copied to the clipboard.

To do so, update your React code to look like this:

import React, { Component } from "react"

export default class YourComponent extends Component {
  constructor(props) {
    super(props)

    this.state = {
      copySuccess: false
    }
  }

  copyCodeToClipboard = () => {
    const el = this.textArea
    el.select()
    document.execCommand("copy")
    this.setState({copySuccess: true})
  }

  render() {
    return (
      <div>
        <div>
          <textarea
            ref={(textarea) => this.textArea = textarea}
            value="Example copy for the textarea."
          />
        </div>
        <div>
          <button onClick={() => this.copyCodeToClipboard()}>
            Copy to Clipboard
          </button>
          {
            this.state.copySuccess ?
            <div style={{"color": "green"}}>
              Success!
            </div> : null
          }
        </div>
      </div>
    )
  }
}

The first change to the code is the constructor() function. In this function, we hold the state for our component in the this.state object. The only value we add to our state is the copySuccess boolean.

Then, we added a this.setState() method to our copyCodeToClipboard() that will change copySuccess to true after the value has been copied to the clipboard.

Last, we added a success message below the <button> that shows a green Success! message if the this.state.copySuccess value is true.

Save your code and preview the changes in your browser. Notice that the green success message is shown after you press the Copy to Clipboard button.