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

Most popular posts

1.

How to Code a Dark Theme with Material UI

2.

Gatsby Code Splitting

3.

Michigan Website Design

4.

The Top Web Design Features Small Business Owners Need to Succeed Online

For Developers

1.

How to make a Font Size Slider in React with Material UI

2.

How to Add Structured Data to Blog Posts in Gatsby

3.

How to Add Breadcrumbs to Google Search in Gatsby

For Business Owners

1.

What the heck is Gatsby js and why use it

2.

10 Landing Page Designs to Inspire Your Small Business

3.

About Google Page Speed Scores and Why They Matter

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

As a website developer in Michigan, I’ve worked with many small business owners looking to redesign their websites to increase sales and connect with new and existing customers. As such, I’ve seen what works and what doesn’t work and cultivated a list of valuable tips that I give to all my clients.

As a small business owner in Michigan, your website is frequently the first impression that customers have of your company. It’s essential that your website is not only visually appealing an...


Published September 1

Snappy Web Design is the one-stop-shop for web design.

Michigan's Newest Web Design Company

You search Google for “Michigan web design” and find my site. I’m Joe, and I’m the head developer at Snappy Web Design. I’m the new guy on the block, and an expert in providing full-service web design for small business owners in MI.

I’m different from typical web design agencies because I aim to be your partner for all things related to your onli...


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