How to code a Copy Link to Clipboard button
This tutorial will show you how to code a mobile compatible "Copy Link to Clipboard" button in less than 2 minutes
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.
export default function CopyLink() {
const [alertOpen, setAlertOpen] = React.useState(false)
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)
}
return (
<>
<Button
variant="contained"
size="large"
onClick={() => {
CopyToClipboard(window.location.href)
setAlertOpen(true)
}}
>
Copy Link to Clipboard
</Button>
<MuiSnackbar
open={alertOpen}
autoHideDuration={3000}
onClose={() => setAlertOpen(false)}
anchorOrigin={{
vertical: "top",
horizontal: "center"
}}
>
<Alert
onClose={() => setAlertOpen(false)}
severity="success"
variant="filled"
>
Link copied
</Alert>
</MuiSnackbar>
</>
)
}
Did you find this article helpful?
If you did, would you take a second to share the article by clicking below? It helps our cause immensely!
Make sure to also click the follow button to get notified when new posts go live 🔔
Ad Blocker Detected!
I get it. I use AdBlock sometimes, too.
Please consider gifting coffee in lieu of ads :)
I'll shout you out if you leave a note!
More from Snappy Web Design
Subscribe to the Snappy Web Design Blog to get notified when a new post goes live. We'll never share your e-mail address or use it for any reason other than to share new posts.
Published May 5
Discover the secrets to designing a website that speaks to your small business's unique identity
Published September 1
Snappy Web Design is the one-stop-shop for web design.
Published August 0
A horrifying trip through poor UX design