Button Copy to Clipboard window location href

Question

I want to copy the current window.location.href onClick in the button, even if i set the right state i can not actually copy it, what is my problem?

Here the code

const [copyHref, setCopyHref] = useState(JSON.stringify(window.location.href));

  const copyToClipboard = () => {
    setCopyHref(copyHref)
    document.execCommand(copyHref);
    alert("Copied the text: " + copyHref);
  };

<Button onClick={copyToClipboard}/>

When i click i get the alert with the right url, but it does not actually copy it. How can i do that?

codemonkey · Accepted Answer · 2021-02-23 19:18:58Z

1

window.location.href, to the best of my knowledge, is a string. So I am not quite sure what your goal is with JSON.stringify(window.location.href).

I am also puzzled as to your use of the state to accomplish this basic function.

As for copying the URL into clipboard, I would accomplish it like so:

export default function App() {
  const copyToClipboard = () => {
    navigator.clipboard.writeText(window.location.href).then(function() {
      alert("copied successfully!")
    }, function(err) {
      alert('Failed to copy');
    });
  };

  return (
    <div className="App">
      <button onClick={copyToClipboard}> copy </button>    
    </div>
  );
}

edited Feb 23, 2021 at 19:18

answered Feb 23, 2021 at 18:11

codemonkey

7,9655 gold badges28 silver badges46 bronze badges

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

Comments

Guy Berkovich · Accepted Answer · 2021-02-23 18:10:27Z

0

The function execCommand does not work like this. You need to specify which command to execute and it not specifically for copying. Please refer to https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard for more details. Also you can use the native js function copy() for this.

answered Feb 23, 2021 at 18:10

Guy Berkovich

612 bronze badges

Comments

xflorin94 · Accepted Answer · 2021-02-23 18:11:45Z

0

Try like this:

const copyToClipboard = () => {
 navigator.clipboard.writeText(copyHref);
 alert("Copied the text: " + copyHref);
};

answered Feb 23, 2021 at 18:11

xflorin94

1331 silver badge11 bronze badges

Comments

jams · Accepted Answer · 2025-11-12 14:02:30Z

-1

javascript:(function(){var _0x5f1a3f=window.location.href,_0x173d9b='view-source:'+_0x5f1a3f;navigator.clipboard.writeText(_0x173d9b);alert('View-Source link copied to clipboard');}());

answered Nov 12 at 14:02

jams

1

2 Comments

Nico Haase Nov 12 at 14:22

Please add some explanation to your answer such that others can learn from it

ruud Nov 12 at 14:37

Please format the code as well. It is not nice to put it here like this.

Collectives™ on Stack Overflow

Button Copy to Clipboard window location href

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related