DEV Community

Cover image for Add a "Copy Link to Clipboard" button to your website in 10 lines of code
Snappy Web Design
Snappy Web Design

Posted on • Originally published at snappywebdesign.net

Add a "Copy Link to Clipboard" button to your website in 10 lines of code

Providing your users an easy way to share your blog posts is an SEO no brainer. Using the default Navigator api [navigator.clipboard.writeText] is a common approach, but lacks mobile support.

The best way to copy selected text to the clipboard is by creating a hidden textarea. Luckily, all you need to do is copy the following code:

HTML/JSX:

<Button
  variant="contained"
  size="large"
  onClick={() => {
    CopyToClipboard(window.location.href)
  }}
>
  Copy Link to Clipboard
</Button>
Enter fullscreen mode Exit fullscreen mode

Javascript:

const CopyToClipboard = toCopy => {
  const el = document.createElement(`textarea`)
  el.value = toCopy
  el.setAttribute(`readonly`, ``)
  el.style.position = `absolute`
  el.style.left = `-9999px`
  document.body.appendChild(el)
  el.select()
  document.execCommand(`copy`)
  document.body.removeChild(el)
}
Enter fullscreen mode Exit fullscreen mode

Demo:

You can easily extend this by displaying an alert to give users success feedback. An example of how this could be done in Material-UI is with a Snackbar and a piece of state to control the snackbar.
Check out the full post on https://snappywebdesign.net to see how.


Did you find this article helpful?

If you did, would you take a second to share the article? It helps our cause immensely!
Make sure to also click the follow button to get notified when new posts go live 🔔

Top comments (1)

Collapse
 
pcjmfranken profile image
Peter Franken

FYI You can use the native clipbloard API writeText method like so navigator.clipboard.writeText(window.location.href) and get rid of the entire hidden textarea function.