copy text to clipboard reactjs code example

Example: copy text to clipboard reactjs

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 the whole text area selected.
    e.target.focus();
    setCopySuccess('Copied!');
  };

  return (
    

      {
       /* Logical shortcut for only displaying the 
          button if the copy command exists */
       document.queryCommandSupported('copy') &&
        

          Copy 
          {copySuccess}
        
      }
      

              </form>
    </div>
  );
}</code></pre>
                    </div>
                </article>
                <div class="tags mt-2">
                    <h3 class="txt">Tags:</h3>
                                            <h4 class="item-tag">
                            <a href="https://newbe.dev/t/misc-example" title="Misc Example">Misc Example</a>
                        </h4>
                                    </div>
                <div class="pt-2">
                    <div><h2>Related</h2>
                        <div class="related-posts">
                                                            <a href="https://newbe.dev/angular-promise-example"
                                   class="overflow-hidden">angular promise example</a>
                                                            <a href="https://newbe.dev/calculate-hours-between-two-dates-code-example"
                                   class="overflow-hidden">calculate hours between two dates code example</a>
                                                            <a href="https://newbe.dev/delete-from-an-array-in-js-code-example"
                                   class="overflow-hidden">delete from an array in js code example</a>
                                                            <a href="https://newbe.dev/node-js-send-an-email-from-noreply-email-code-example"
                                   class="overflow-hidden">node js send an email from noreply email code example</a>
                                                            <a href="https://newbe.dev/ui-range-slider-code-example"
                                   class="overflow-hidden">ui range slider code example</a>
                                                            <a href="https://newbe.dev/angular-flex-layout-cli-code-example"
                                   class="overflow-hidden">angular flex layout cli code example</a>
                                                            <a href="https://newbe.dev/javascript-how-to-check-a-checkbox-if-vaue-is-true-code-example"
                                   class="overflow-hidden">javascript how to check a checkbox if vaue is true code example</a>
                                                            <a href="https://newbe.dev/data-delete-in-php-code-code-example"
                                   class="overflow-hidden">data delete in php code code example</a>
                                                            <a href="https://newbe.dev/how-to-copy-file-from-other-directory-into-present-directory-in-linux-code-example"
                                   class="overflow-hidden">how to copy file from other directory into present directory in linux code example</a>
                                                            <a href="https://newbe.dev/math-max-objects-code-example"
                                   class="overflow-hidden">math.max objects code example</a>
                                                            <a href="https://newbe.dev/pm2-install-npm-package-code-example"
                                   class="overflow-hidden">pm2 install npm package code example</a>
                                                            <a href="https://newbe.dev/how-to-set-environment-variable-in-windows-for-node-js-code-example"
                                   class="overflow-hidden">how to set environment variable in windows for node js code example</a>
                                                    </div>
                    </div>
                </div>
            </div>
            <div class="mt-5 mt-lg-0 right-sidebar flex-grow-1 flex-lg-grow-0">
                <div class="crayons-card crayons-card--secondary">
                    <header class="crayons-card__header"><h3 class="crayons-subtitle-2">Recent Posts</h3></header>
                    <div>
                                                    <a href="https://newbe.dev/pandas-how-to-find-column-contains-a-certain-value" class="crayons-link crayons-link--contentful">
                                Pandas how to find column contains a certain value
                            </a>
                                                    <a href="https://newbe.dev/recommended-way-to-install-multiple-python-versions-on-ubuntu-20-04" class="crayons-link crayons-link--contentful">
                                Recommended way to install multiple Python versions on Ubuntu 20.04
                            </a>
                                                    <a href="https://newbe.dev/build-super-fast-web-scraper-with-python-x100-than-beautiful-soup" class="crayons-link crayons-link--contentful">
                                Build super fast web scraper with Python x100 than BeautifulSoup
                            </a>
                                                    <a href="https://newbe.dev/how-to-convert-an-sql-query-result-to-a-pandas-data-frame-in-python" class="crayons-link crayons-link--contentful">
                                How to convert a SQL query result to a Pandas DataFrame in Python
                            </a>
                                                    <a href="https://newbe.dev/how-to-write-a-pandas-data-frame-to-a-csv-file-in-python" class="crayons-link crayons-link--contentful">
                                How to write a Pandas DataFrame to a .csv file in Python
                            </a>
                                            </div>
                </div>
            </div>














        </div>
    </div>

        <footer class="pd-3 pd-md-5">
            <div>
                <div class="p-2 p-md-4 text-center"><span>© 2021 newbedev</span><a href="/p/privacy"
                                                                                   class="ml-3">Privacy Policy</a></div>
            </div>
        </footer>
    </div>
</div>
    <div id="g_id_onload"
         data-client_id="5503047233-647fcja6dp2ui6qgf6ju6psqbeakoll4.apps.googleusercontent.com"
         data-login_uri="https://newbe.dev/google_login"
                     
    >
    </div>



























    <script type="text/javascript">
        var b = '<div class="copy-btn"><a href="javascript:;" class="copy-pre"><image class="copy-image" ' +
            'src="/images/content-copy-icon.svg" ><span ' +
            'class="tooltiptext">Click to copy</span></a></div>';
        var pre = document.getElementsByTagName('pre');
        for(var i = 0, max = pre.length; i < max; i++) {
            var el = pre[i]
            el.insertAdjacentHTML("beforebegin", b);
        }
        const divs = document.querySelectorAll('.copy-pre');
        divs.forEach(el => el.addEventListener('click', event => {
            var d = el.parentElement.nextSibling
            var c = document.createRange();
            c.selectNodeContents(d);
            var e = window.getSelection();
            e.removeAllRanges();
            e.addRange(c);
            document.execCommand("copy");
            var span = el.querySelector('span');
            span.innerText = 'Copied'
        }));
    </script>

    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-126228416-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-126228416-1');
    </script>
</body>
</html>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>