DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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.

You’ve already scrolled down this far, why not join our community of 900k+ developers all learning together?