SHARE

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

Profile Pic of Snappy Web Design

Jul 2 · 3 min read

How to code a Copy Link to Clipboard button

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 🔔

Hire me

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.

Copyright © 2024. Snappy Web Design. All rights reserved.