Copy Text To Clipboard using ReactJS

Question

I've been stuck on this issue for a while now and couldn't find anything to help me, so I would love if someone experienced could help me out on this.

lets say I have this const:

const test = "Hello World".

How can I have an onClick function on a button, where when I click it copies the string of test to the users clipboard?

Does this answer your question? [In reactJS, how to copy text to clipboard?](https://stackoverflow.com/questions/39501289/in-reactjs-how-to-copy-text-to-clipboard) — Jacob Stephenson, Jun 03 '22 at 22:54
You can use [`navigator.clipboard.writeText`](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) or use `document.execCommand("copy")` to support older browsers. I once created [a library](https://copy-js.glitch.me/) a while ago if you're interested. — code, Jun 03 '22 at 22:59

score 8 · Answer 1 · answered Jun 04 '22 at 02:15

8

you can add the button on the react page :

<button onClick={() =>  navigator.clipboard.writeText('Copy this text to clipboard')}>Copy</button>

answered Jun 04 '22 at 02:15

sabdahtb

231
1
3

This seems right, but giving an error in Chrome. – Adarsh Pawar Aug 10 '23 at 07:47

score 1 · Answer 2 · answered Jun 04 '22 at 04:12

To copy a text on clipboard you can use navigator.clipboard and document.execCommand() in older browsers.

onClick={async () => {
  if ("clipboard" in navigator) {
    await navigator.clipboard.writeText("Text which you want to copy");
  } else {
    document.execCommand("copy", true, "Text which you want to copy");
  }
}}

Copy Text To Clipboard using ReactJS

2 Answers2