Question

77

Copy text from a div to clipboard using document.execCommand in React

rated 0 times [ 84] [ 7] / answers: 1 / hits: 5696 / 3 Years ago, fri, april 9, 2021, 12:00:00

I am attempting to copy text from a div after the URL is shortened.

I have placed a ref value in the div that will render the shortend URL. But, I am getting error:

TypeError: inputArea.input.select() is not a function.

I am not sure how to reference the text within the div.

import { useCallback, useEffect, useRef, useState } from "react";



const Shorten = () => {

        

    const [copySuccess, setCopySuccess] = useState('');

    const inputArea = useRef(null);

        

    function copyLink(e){

        inputArea.current.select();

        document.execCommand('copy');

        e.target.focus();

        setCopySuccess('Copied!');

    };

 

    {isPending && <div className="loading-text">Loading...</div>}

    {shortLink && <div ref={inputArea} className="shorten-text">{shortLink}</div>}

    <hr></hr>

    <div>

      <button className="shorten-it" onClick={copyLink} >Copy</button>

      {copySuccess}

    </div>

  </section>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ishmaelw

Add To Favorites

Follow

Total Points: 528

Total Questions: 96

Total Answers: 103

Location: Venezuela

Member since Sat, Apr 24, 2021

3 Years ago

ishmaelw questions

1 Puppeteer does not load images stored locally when generate PDF

Mon, Mar 22, 21, 00:00, 3 Years ago

1 Pod install error after upgrading to React Native 0.63.0

Thu, Jul 16, 20, 00:00, 4 Years ago

1 Remove a query string using react-router without reloading page?

Tue, Apr 28, 20, 00:00, 4 Years ago

1 How to listen for changes to window.location.search in 2019

Sat, Sep 21, 19, 00:00, 5 Years ago

1 React TypeScript: How to get form values, and response codes using fetch

Tue, Sep 3, 19, 00:00, 5 Years ago

View All

answered 3 Years ago charlesmarions · Accepted Answer

Document.execCommand will get deprecated in favor of the modern Clipboard API to interact with clipboard.

Here is how to use Clipboard API:

function updateClipboard(newClip) {

  navigator.clipboard.writeText(newClip).then(

    () => {

      setCopySuccess("Copied!");

    },

    () => {

      setCopySuccess("Copy failed!");

    }

  );

}



function copyLink() {

  navigator.permissions

    .query({ name: "clipboard-write" })

    .then((result) => {

      if (result.state === "granted" || result.state === "prompt") {

        updateClipboard(inputArea.current?.innerText);

      }

    });

}

Notes about using Clipboard API:

The Clipboard API adds greater flexibility, in that you aren't limited to copying the current selection into the clipboard, but can directly specify what information to place into the clipboard.

Using the API requires that you have the permission "clipboardRead" or "clipboardWrite" in your manifest.json file.

The clipboard-write permission is granted automatically to pages when they are in the active tab. The clipboard-read permission must be requested, which you can do by trying to read data from the clipboard.

Clipboard API (clipboard-write permission) is currently not supported by Firefox but supported by Chrome / Chromium

Or, to use Document.execCommand, you should convert the div into an input or textarea (which can be selected) and use CSS to make it look like a div:

function copyLink(e) {

  inputArea.current?.select();

  document.execCommand("copy");

  e.target.focus();

  setCopySuccess("Copied!");

}



// ...



{shortLink && (

  <input

    ref={inputArea}

    type="text"

    className="shorten-text"

    value={shortLink}

  />

)}

Or, see How to copy text from a div to clipboard if you still want to use div.