CODEWITHSUNDEEP
javascriptreactjs
Vardan Hambardzumyan
Vardan Hambardzumyan

Reputation: 416

issue with copy to clipboard in react.js

I am trying to copy my variable value to clipboard but something not working, I am using React.

    /** @jsx jsx */
    import { jsx, css } from "@emotion/core";
    import Cookies from "js-cookie";
    const ButtonBox = () => {

      function copyText(){
        const myToken = Cookies.get('token');
        const linkAndToken = 'http://www.something.com/' + myToken;
        linkAndToken.select();
        linkAndToken.setSelectionRange(0, 99999);
        document.execCommand("copy");
        // alert(linkAndToken)
      }

      return (
        <div css={button} onClick={copyText}>
         <span css={buttonText}>Copy&nbsp;Link</span>
        </div>
      );
    };

Please help me to correct my function. Thanks

Upvotes: 1

Views: 126

Answers (1)

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11305

I think Clipboard.writeText is better for this scenario

document.execCommand("copy"); makes sense when you have text in input field and you would like to store part of it with HTMLInputElement.setSelectionRange 

function copyText() {
        const myToken = Cookies.get('token');
        const linkAndToken = 'http://www.something.com/' + myToken;
        navigator.clipboard.writeText(linkAndToken).then(function() {
          // handle copied text
        })
      }

Upvotes: 3

Related Questions