Click to Copy!
Tags: javascript, webdev, react, codenewbie
Published: 2021-08-28 06:39:54

### Hey Guys 👋
Ever wondered how some websites have "click to copy" functionality?  

* You can also do just that, whether you're building an e-commerce website where you want user to click on share button to write the url of the product on their website.  
* or you are building some website/documentation where people can click somewhere and copy the code snippet.

In this article I will explain how you can mess around with the user's clipboard 😄. 
## Let's get started 🚀

To explain this better, I will create a demo project. You can  follow along if you want to.  
- Make a folder and name it whatever you like.  
- In that folder make two files
  - 1. `index.html`  
  - 2. `app.js`  

Add the following HTML code in `index.html`.  
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Copy to Clipboard 📋</title>
    <style></style>
  </head>
  <body>
    <h2>Implementing copy to clipboard with a simple click 📋</h2>
    <button>Click to copy</button>
    <script src="./app.js"></script>
  </body>
</html>
```

- Now select `h2` and `button` element in `app.js`:
```js
const h2 = document.querySelector('h2');
const button = document.querySelector('button');
```

Preview the `index.html` in your browser.
> Side note: This demo will not work in IE  

It should look something like this 👇
![preview of `index.html`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhqcmdm6uu6um171yeyc.png)

<hr/>

Now to alter the user's clipboard we have to use [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard).  
The `clipboard` object is exposed by the `navigator.clipboard` property.  

Add the following code in the `app.js` file:
```js
const cb = navigator.clipboard;
```
- `console.log(cb)` will look something like this 👇  

![Preview of clipboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nia59dvsjbkxi19goq5u.png)  

👉 Remember: Clipboard API is asynchronous, means every method will return a promise which will resolve or reject.
To consume the `promise` we can either use `async/await` syntax or `.then/.catch`.  
<hr/>
### Reading text from clipboard 📋
- To read the text from clipboard I will add a `click` event listener to the `button`:  
- In the event listener I will call a method called `readText()`, which is available on the `cb` object we accessed earlier:
```js
button.addEventListener('click', async () => {
  const text = await cb.readText();
  console.log(text);
	// output will be whatever you last copied, 
	// or empty string if the
	// copied data is not of type text.
});
```
- To read the text from clipboard user must grant `read` permission, otherwise the operation will fail. 👇   
![clipboard_permissrion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gwby69z2pfzdaslwke7.png)  
- If permission is denied 👇
![permission_denied](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mjrfhwop3mwmgebgqoj.png)  

> You can check if the user granted the permission or not using the [Permission API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API).  
> *To learn more about Permissions API read my article [here](https://dev.to/sidmirza4/permissions-api-why-should-you-start-using-it-2k4d).*

<hr/>

### Writing text to clipboard 📋
- To write the text to user's clipboard we use `writeText()` method available on the `cb` object.  
- Writing permission is given automatically by the browser.  

Write the following the code in the `app.js`:
```js
button.addEventListener('click', async () => {
  // const text = await cb.readText();
  // console.log(text);

  // writing the inner text of the h2 element
  // to the user's clipboard.  
	cb.writeText(h2.innerText).then(() => {
		console.log('text written to clipboard')
	})
});
``` 
************************************************
That's it for this article guys.  

See, how easy it is you mess with the user's clipboard 😂.  

#### Thanks ❤️ for giving it a read, I hope you found it useful.  
#### For concise tips and tricks, please follow me on [Twitter](https://www.twitter.com/sidmirza4)  
#### Happy Coding 💚