In reactJS how to copy text to clipboard

Question

I m using ReactJS and when a user clicks a link I want to copy some text to the clipboard   I am using Chrome 52 and I do not need to support any other browsers   I can t see why this code does not result in the data being copied to the clipboard   the origin of the code snippet is from a Reddit post    Am I doing this wrong  Can anyone suggest is there a  correct  way to implement copy to clipboard using reactjs   copyToClipboard    text    gt      console log  text   text    var textField   document createElement  textarea     textField innerText   text   document body appendChild textField    textField select     document execCommand  copy     textField remove

User · Answer

Best solution with react hooks  no need of external libraries for that   x000D   x000D  import React    useState   from  react   x000D   x000D  const MyComponent        gt    x000D  const  copySuccess  setCopySuccess    useState      x000D   x000D     your function to copy here x000D   x000D    const copyToClipBoard   async copyMe   gt    x000D      try   x000D        await navigator clipboard writeText copyMe   x000D        setCopySuccess  Copied     x000D        catch  err    x000D        setCopySuccess  Failed to copy     x000D        x000D       x000D   x000D  return   x000D    lt div gt  x000D       lt Button onClick       gt  copyToClipBoard  some text to copy    gt  x000D       Click here to copy x000D        lt  Button gt  x000D       after copying see the message here x000D     copySuccess  x000D    lt  div gt  x000D    x000D    x000D   x000D   x000D    check here for further documentation about navigator clip board   navigator clipboard documentation navigotor clipboard is supported by a huge number of browser look here supported browser

User · Answer

If you want to select from the DIV instead of the text field  here is the code  The  code  is the value that has to be copied  import React from  react  class CopyToClipboard extends React Component      copyToClipboard code        var textField   document createElement  textarea       textField innerText   code     document body appendChild textField      textField select       document execCommand  copy       textField remove         render         return          lt div onClick  this copyToClipboard bind this  code   gt           code         lt  div gt                export default CopyToClipboard

User · Answer

Here s another use case  if you would like to copy the current url to your clipboard   Define a method  const copyToClipboard   e   gt      navigator clipboard writeText window location toString        Call that method   lt button copyToClipboard  shareLink  gt     Click to copy current url to clipboard  lt  button gt

User · Answer

here is my code   import React from  react   class CopyToClipboard extends React Component      textArea  any    copyClipBoard        gt        this textArea select       document execCommand  copy          render         return          lt  gt           lt input style   display   none    value  TEXT TO COPY    type  text  ref   textarea    gt  this textArea   textarea     gt           lt div onClick  this copyClipBoard  gt          CLICK          lt  div gt         lt   gt                export default CopyToClipboard

User · Answer

I personally don t see the need for a library for this  Looking at http   caniuse com  feat clipboard it s pretty widely supported now  however you can still do things like checking to see if the functionality exists in the current client and simply hide the copy button if it doesn t  import React from  react    class CopyExample extends React Component      constructor props        super props        this state     copySuccess              copyToClipboard    e    gt        this textArea select        document execCommand  copy           This is just personal preference         I prefer to not show the whole text area selected      e target focus        this setState   copySuccess   Copied               render         return          lt div gt                        Logical shortcut for only displaying the              button if the copy command exists             document queryCommandSupported  copy    amp  amp             lt div gt               lt button onClick  this copyToClipboard  gt Copy lt  button gt                this state copySuccess             lt  div gt                     lt form gt             lt textarea             ref   textarea    gt  this textArea   textarea              value  Some text to copy              gt           lt  form gt         lt  div gt                     export default CopyExample   Update  Rewritten using React Hooks in React 16 7 0-alpha 0 import React    useRef  useState   from  react    export default function CopyExample        const  copySuccess  setCopySuccess    useState        const textAreaRef   useRef null      function copyToClipboard e        textAreaRef current select        document execCommand  copy           This is just personal preference         I prefer to not show the whole text area selected      e target focus        setCopySuccess  Copied             return        lt div gt                    Logical shortcut for only displaying the            button if the copy command exists           document queryCommandSupported  copy    amp  amp           lt div gt             lt button onClick  copyToClipboard  gt Copy lt  button gt              copySuccess           lt  div gt                 lt form gt           lt textarea           ref  textAreaRef            value  Some text to copy            gt         lt  form gt       lt  div gt

User · Answer

import React    Component   from  react    export default class CopyTextOnClick extends Component       copyText        gt            this refs input select             document execCommand  copy             return false             render              const   text     this state           return                lt button onClick   this copyText   gt                    text                     lt input                     ref  input                      type  text                      defaultValue   text                       style    position   fixed   top   -1000px       gt               lt  button gt

User · Answer

Why do not use just event clipboardData collection method e clipboardData setData type  content    In my opinion is the most streightforward method to achieve pushing smth inside clipboard  check this out  i ve used that to modify data while native copying action         handleCopy    e    gt        e preventDefault        e clipboardData setData  text plain    Hello  world        render        gt       lt Component         onCopy  this handleCopy        gt    I followed that path  https   developer mozilla org en-US docs Web Events copy  Cheers   EDIT  For testing purposes  i ve added codepen  https   codepen io dprzygodzki pen ZaJMKb

User · Answer

Use this simple inline onClick function on a button if you want to programatically write data to the clipboard   onClick       gt   navigator clipboard writeText this state textToCopy

User · Answer

For those people who are trying to select from the DIV instead of the text field  here is the code  The code is self-explanatory but comment here if you want more information         import React from  react                    set ref to your div           setRef    ref    gt                   debugger    eslint-disable-line             this dialogRef   ref                          createMarkeup   content   gt                   html  content                       following function select and copy data to the clipboard from the selected Div        Please note that it is only tested in chrome but compatibility for other browsers can be easily done            copyDataToClipboard        gt                try                 const range   document createRange                  const selection   window getSelection                  range selectNodeContents this dialogRef                 selection removeAllRanges                  selection addRange range                 document execCommand  copy                  this showNotification  Macro copied successfully     info                  this props closeMacroWindow                  catch  err                     console log err     eslint-disable-line                 alert  Macro copy failed                                               render                         return                            lt div                           id  macroDiv                            ref   el    gt                                this dialogRef   el                                                            className  classes paper                            dangerouslySetInnerHTML  this createMarkeup this props content                             gt

User · Answer

This work for me  const handleCopyLink   useCallback      gt        const textField   document createElement  textarea       textField innerText   url     document body appendChild textField      if  window navigator platform      iPhone           textField setSelectionRange 0  99999        else         textField select             document execCommand  copy       textField remove            toast success  Link successfully copied         url

User · Answer

lt input value  get data   api key    styleName  input-wrap  title  get data   api key    ref  apikeyObjRef    gt     lt div onClick       gt      apikeyObjRef current select      if  document execCommand  copy          document execCommand  copy           styleName  copy   gt        lt  div gt

User · Answer

You should definitely consider using a package like  Shubham above is advising  but I created a working codepen based on what you described  http   codepen io dtschust pen WGwdVN editors 1111   It works in my browser in chrome  perhaps you can see if there s something I did there that you missed  or if there s some extended complexity in your application that prevents this from working      html  lt html gt     lt body gt       lt div id  container  gt        lt  div gt     lt  body gt   lt  html gt       js const Hello   React createClass     copyToClipboard       gt        var textField   document createElement  textarea       textField innerText    foo bar baz      document body appendChild textField      textField select       document execCommand  copy       textField remove          render  function          return          lt h1 onClick  this copyToClipboard  gt Click to copy some text lt  h1 gt                ReactDOM render   lt Hello  gt     document getElementById  container

User · Answer

I ve taken a very similar approach as some of the above  but made it a little more concrete  I think  Here  a parent component will pass the url  or whatever text you want  as a prop   import   as React from  react   export const CopyButton      url    any    gt      const copyToClipboard        gt        const textField   document createElement  textarea        textField innerText   url      document body appendChild textField       textField select        document execCommand  copy        textField remove            return        lt button onClick  copyToClipboard  gt        Copy      lt  button gt

User · Answer

copyclip    item    gt        var textField   document createElement  textarea       textField innerText   item     document body appendChild textField      textField select       document execCommand  copy       this setState   copy   quot Copied quot         textField remove       setTimeout      gt          this setState   copy   quot  quot            1000         lt span   className  quot cursor-pointer ml-1 quot  onClick      gt  this copyclip passTextFromHere    gt Copy lt  span gt   lt small gt  this state copy  lt  small gt

User · Answer

Found best way to do it  i mean the fastest way  w3school  https   www w3schools com howto howto js copy clipboard asp  Inside a react functional component  Create a function named handleCopy   function handleCopy          get the input Element ID  Save the reference into copyText   var copyText   document getElementById  mail        select   will select all data from this input field filled     copyText select     copyText setSelectionRange 0  99999       execCommand   works just fine except IE 8  as w3schools mention   document execCommand  copy        alert the copied value from text input   alert  Email copied    copyText value         lt  gt                 lt input                 readOnly                 type  text                  value  exemple email com                  id  mail                  gt                 lt button onClick  handleCopy  gt Copy email lt  button gt    lt   gt    If not using React  w3schools also have one cool way to do this with tooltip included  https   www w3schools com howto tryit asp filename tryhow js copy clipboard2    If using React  a cool think to do  Use a Toastify to alert the message  https   github com fkhadra react-toastify This is the lib very easy to use  After installation  you may be able to change this line    alert  Email copied    copyText value       For something like   toast success  Email Copied    copyText value       If you want to use it  dont forget to Install toastify  import ToastContainer and also toasts css   import   ToastContainer  toast   from  react-toastify  import  react-toastify dist ReactToastify css    and add the toast container inside return    import React from  react   import   ToastContainer  toast   from  react-toastify  import  react-toastify dist ReactToastify css    export default function Exemple       function handleCopy         var copyText   document getElementById  mail       copyText select       copyText setSelectionRange 0  99999      document execCommand  copy       toast success  Hi  Now you can  ctrl v    copyText value            return        lt  gt         lt ToastContainer   gt         lt Container gt                   lt span gt E-mail lt  span gt                 lt input                 readOnly                 type  text                  value  myemail exemple com                  id  mail                  gt                 lt button onClick  handleCopy  gt Copy Email lt  button gt         lt  Container gt       lt   gt

User · Answer

The simplest way will be use the react-copy-to-clipboard npm package    You can install it with the following command  npm install --save react react-copy-to-clipboard   Use it in the following manner   const App   React createClass     getInitialState         return  value      copied  false            onChange  target   value          this setState  value  copied  false             onCopy         this setState  copied  true             render         return          lt div gt              lt input value  this state value  size  10  onChange  this onChange    gt            lt CopyToClipboard text  this state value  onCopy  this onCopy  gt             lt button gt Copy lt  button gt           lt  CopyToClipboard gt                    lt div gt           this state copied    lt span  gt Copied  lt  span gt    null                   lt  div gt           lt br   gt            lt input type  text    gt          lt  div gt                  ReactDOM render  lt App   gt   document getElementById  container       A detailed explanation is provided at the following link  https   www npmjs com package react-copy-to-clipboard  Here is a running fiddle

User · Answer

You can get this done without the need of an external library  e g  within a button  lt button    onClick       gt   navigator clipboard writeText  Copy this text to clipboard     gt    Copy  lt  button gt   for internet explorer 11 and older browsers you might need to change the code a bit here is an example   lt button    onClick       gt   window clipboardData setData  quot Text quot    Copy this text to clipboard    gt   Copy  lt  button gt   Hope this helps

User · Answer

Your code should work perfectly  I use it the same way  Only make sure that if the click event is triggered from within a pop up screen like a bootstrap modal or something  the created element has to be within that modal otherwise it won t copy  You could always give the id of an element within that modal  as a second parameter  and retrieve it with getElementById  then append the newly created element to that one instead of the document  Something like this   copyToClipboard    text  elementId    gt      const textField   document createElement  textarea      textField innerText   text    const parentElement   document getElementById elementId     parentElement appendChild textField     textField select      document execCommand  copy      parentElement removeChild textField

User · Answer

use this command to pass your value to the function var promise   navigator clipboard writeText newClipText

User · Answer

You can also use react hooks into function components or stateless components with this piece of code  PS  Make sure you install useClippy through npm yarn with this command  npm install use-clippy or yarn add use-clippy import React from  react   import useClippy from  use-clippy    export default function YourComponent         clipboard is the contents of the user s clipboard       setClipboard  new value   wil set the contents of the user s clipboard     const  clipboard  setClipboard    useClippy       return        lt div gt             Button that demonstrates reading the clipboard             lt button         onClick       gt              alert  Your clipboard contains    clipboard                       gt          Read my clipboard        lt  button gt             Button that demonstrates writing to the clipboard             lt button         onClick       gt              setClipboard  Random number    Math random                         gt          Copy something        lt  button gt       lt  div gt

User · Answer

navigator clipboard doesn t work over http connection according to their document  So you can check if it s coming undefined and use document execCommand  copy   instead  this solution should cover almost all the browsers const defaultCopySuccessMessage    ID copied    const CopyItem    props    gt      const   copySuccessMessage   defaultCopySuccessMessage  value     props    const  showCopySuccess  setCopySuccess    useState false      function fallbackToCopy text        if  window clipboardData  amp  amp  window clipboardData setData             IE specific code path to prevent textarea being shown while dialog is visible        return window clipboardData setData  Text   text        else if  document queryCommandSupported  amp  amp  document queryCommandSupported  copy            const textarea   document createElement  textarea         textarea innerText   text          const parentElement document querySelector  quot  up-CopyItem-copy-button quot         const parentElement   document getElementById  copy         if   parentElement            return               parentElement appendChild textarea        textarea style position    fixed     Prevent scrolling to bottom of page in MS Edge        textarea select         try           setCopySuccess true          document execCommand  copy      Security exception may be thrown by some browsers          catch  ex            console log  Copy to clipboard failed    ex          return false         finally           parentElement removeChild textarea                       const copyID        gt        if   navigator clipboard          fallbackToCopy value        return           navigator clipboard writeText value      setCopySuccess true         return showCopySuccess          lt p gt  copySuccessMessage  lt  p gt               lt span id  quot copy quot  gt         lt button onClick  copyID  gt Copy Item  lt  button gt       lt  span gt         And you can just call and reuse the component anywhere you d like to const Sample     gt       lt CopyItem value  quot item-to-copy quot   gt

[javascript] In reactJS, how to copy text to clipboard?

Examples related to javascript

Examples related to reactjs

Examples related to clipboard