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>

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)
}

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 🔔