DEV Community

loading...
Cover image for Add a "Copy Link to Clipboard" button to your website in 10 lines of code

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

Snappy Web Design
Snappy Web Design is a full service web design + web development company in Ann Arbor, Michigan https://snappywebdesign.net
Originally published at snappywebdesign.net ・1 min read

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 🔔

Discussion (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.