Copy buttons are a convenient tool that many websites and applications provide. The traditional way to do this wasn't too difficult, but it required some knowledge in some of the more uncommon WEB APIs and was a more imperative way to complete the task.

However, with the increase in browser support of the Clipboard API, there's now an easier, more declarative way to achieve this functionality. In this article, I will discuss both techniques so you can have options if you need to implement this feature on your own.

The Old Way

To appreciate the improved way of copying, we need to take a brief look at how we used to have to do things.

function copy(textToCopy) {
// Add a temporary textarea element that we can later run the
//"copy" command on.
const textarea = document.createElement("textarea"); 

 //Add value we want to copy to the textarea
  textarea.value = textToCopy; 

  //Append textarea to the document
  document.body.appendChild(textarea); 

  //select the text to be copied
  textarea.select(); 

 // Copy the selected text inside the textarea to the clipboard
  document.execCommand("copy"); 

 //Remove temporary textarea from the document
  textarea.remove(); 
}

As you can see it's a very imperative approach and, in my opinion, seems like a lot of work to perform a relatively common task. Now let's take a look at the improved (and simpler!) way to do this utilizing the Clipboard API.

Clipboard API

The Clipboard API is a relatively new-ish feature that provides a convenient way to hook into common clipboard actions like copying, cutting, and pasting. This API is intended to replace the need of the document.execCommand() method which is now being deprecated. The awesome part about the Clipboard API is that it allows you to leverage Promises and provides a more succinct way to copy to the clipboard than we had before.

The New Way

function copy(textToCopy) {
  navigator.clipboard.writeText(textToCopy)
    .then(() => {
        /*Copying to clipboard was successful*/
    })
    .catch(() => {
    //Error: Unable to copy to clipboard;
   })
}

☝️This code block with the copy button in the upper right-hand corner is a great example of this type of functionality in the real world.

As you can see, this example is a much simpler and more declarative approach than the previous code snippet. The real magic is in the clipboard.writeText() method which takes the string that is passed in and copies it to the system's keyboard. If the copy was successful, the Promise will resolve, however, if the system does not have permission to write to the clipboard then it will be rejected.

El Fin 👋🏽

Thanks to the increasing robustness of JavaScript we now have a better option when it comes to implementing this very handy feature of allowing the user to conveniently copy a piece of text to the clipboard.

If you enjoy what you read, feel free to like this article or subscribe to my newsletter, where I write about programming and productivity tips.

As always, thank you for reading, and happy coding!

Resources

Photo by Bethany Cirlincione on Unsplash

Alyssa Holland's Blog