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? — Jacob Stephenson
– Jacob Stephenson, Commented Jun 3, 2022 at 22:54
You can use navigator.clipboard.writeText or use document.execCommand("copy") to support older browsers. I once created a library a while ago if you're interested. — code
– code, Commented Jun 3, 2022 at 22:59

sabdahtb · Accepted Answer · 2022-06-04 02:15:38Z

10

you can add the button on the react page :

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

answered Jun 4, 2022 at 2:15

sabdahtb

2511 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adarsh Pawar Over a year ago

This seems right, but giving an error in Chrome.

Shikhar Awasthi · Accepted Answer · 2022-06-04 04:12:25Z

1

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");
  }
}}

answered Jun 4, 2022 at 4:12

Shikhar Awasthi

1,2341 gold badge5 silver badges13 bronze badges

Collectives™ on Stack Overflow

Copy Text To Clipboard using ReactJS

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related