Button with copyable link

Question

I need to create a button that, when I click on it, I copy a specific link I'm using react.js

This is my button in moment

<a href="#"
 className="group inline-flex items-center font-medium text-indigo-600 hover:text-indigo-900">
 <LinkIcon 
   className="h-5 w-5 text-indigo-500 group-hover:text-indigo-900"
   aria-hidden="true"/>
  <span className="ml-2">Copy link</span>
</a>

When I click on this button, I need the clipboard to have something like this "https::/google.com"

Maybe, [this](https://stackoverflow.com/questions/39501289/in-reactjs-how-to-copy-text-to-clipboard) could help. — Junaid Faryad, Oct 06 '21 at 18:40

score 1 · Accepted Answer · answered Oct 06 '21 at 18:43

1

You can use React copy to clip board package for that. This is easy to use. Follow the below link.

https://www.npmjs.com/package/react-copy-to-clipboard

Comment here if you still face any issue.

answered Oct 06 '21 at 18:43

Diptom Saha

86
2

score 0 · Answer 2 · answered Oct 06 '21 at 18:42

0

You just need this function:

const writeTextToClipboard = text => navigator.clipboard.writeText(text);

Just place the function at the onclick event with the text link you need to copy

answered Oct 06 '21 at 18:42

Nacho

870
6
9

score 0 · Answer 3 · answered Oct 06 '21 at 18:51

0

You can try this if you're using hooks.

answered Oct 06 '21 at 18:51

Tarun

104
4

Button with copyable link

3 Answers3