copy to clipboard is not working as expected in reactjs

Question

I tried to do the copy to the clipboard feature in react js. But I am unable to do that. Here is my code

import { useEffect, useRef } from "react";

function App() {
  const inputRef = useRef("");
  useEffect(() => {
    inputRef.current.value = window.location;
    inputRef.current.select();
    document.execCommand("copy");
  }, []);
  return (
    <div className="App">
      <input type="text" ref={inputRef} />
    </div>
  );
}

export default App;

codesandbox: https://codesandbox.io/s/gallant-tesla-6399m?file=/src/App.js:0-352

text is getting selected but it is not copying. How to fix this issue?

Maybe has something to do with permissions. From mdn docs ‘ document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler. ‘ From https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard See also: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText — Zeno Dalla Valle, Mar 10 '21 at 17:28
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) — Martin, Mar 10 '21 at 17:30
Working Sample here https://codesandbox.io/s/react-copy-clipboard-buky5 Some events need to be triggered via User Actions. — visizky, Mar 10 '21 at 17:34
What do you want to do? Do you want to copy `window.location` to clipboard? — Ajeet Shah, Mar 10 '21 at 17:50
Use the [clipboardAPI](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard) — Martin, Oct 21 '21 at 15:37
Does this answer your question? [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Martin, Oct 21 '21 at 15:37

whywhywhy · Answer 1 · 2021-10-21T15:10:25.260

I got the copy to clipboard to work this way. The thing is that it's not supported by Internet Explorer caniuse.

import { window } from 'global';

function copy(text) {
   return window.navigator.clipboard.writeText(text);
  }

function CopyToClipboard({copyText}){
   return(
       <div
          onClick={() => {
            copy(copyText);
          }}
           style={{color: 'blue', height: '5px', width: '5px'}}
         />
       )
    }

This is a reusable component that you can use anywhere in your project. The way it would be implemented is

<CopyToClipboard copyText={THE_TEXT_YOU_WANT_HERE} />

score 0 · Answer 2 · answered Oct 21 '21 at 14:28

I use the NPM package react-copy-to-clipboard

Makes things pretty easy. In this example, when you click the Font Awesome copy icon the code will be copied to the clipboard and give an window alert the code was copied.

import { CopyToClipboard } from "react-copy-to-clipboard";
const code = "What to copy";
<CopyToClipboard text={code} onCopy={() => window.alert("Copied to Clipboard")}>
    <i className="fal fa-copy"></i>
</CopyToClipboard>

copy to clipboard is not working as expected in reactjs

2 Answers2