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 🔔
Top comments (1)
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.