How to implement copy function in react

How to implement the copy function in react: 1. Implement the copy function through the "copy-to-clipboard" library; 2. Use the "react-copy-to-clipboard" library to implement the copy function; 3. Through the "navigator" .clipboard.writeText(e)" method to realize copying; 4. To realize copying through "document.execcommand("copy")" method; 5. To realize copy function through "copy-js" library.

## The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

#How to implement the copy function in react?

One-click copying in React - five methods

copy-to-clipboard library (recommended)
• react-copy-to-clipboard library (recommended)
• navigator.clipboard.writeText(e) (recommended)
• document.execcommand("copy")
• copy- js library

copy-to-clipboard

1. Installation method

// npm安装---这种方式可能会对babel的版本有限制
npm i --save copy-to-clipboard


//cdn引入
<script src="https://wzrd.in/standalone/copy-to-clipboard@latest" async></script>

2. Usage method

import copy from 'copy-to-clipboard';const handleClick = ()=>{
	copy('复制的内容');
	message.success(&#39;复制成功&#39;)}<Button onClick={handleClick}>复制</Button>

react-copy-to-clipboard

This method is based on copy-to-clipboard. If you find that there are version restrictions with other npm packages when installing copy-to-clipboard If so, then this probably won't work, but it's not impossible to try

1. Installation

npm i --save react-copy-to-clipboard

2. Usage - there is a place

to pay attention to, in , there can only be one root element, and I tried it myself, if in , a root element is wrapped If there are two sibling nodes such as a div and a button, the copy will not take effect. I don't know why. Interested friends can check out the source code.

import { CopyToClipboard } from 'react-copy-to-clipboard';

 <CopyToClipboard text={&#39;复制的内容&#39;}
   onCopy={(_, result) => {
     if (result) {
       message.success(&#39;复制成功&#39;);
     } else {
       message.error(&#39;复制失败，请稍后再试&#39;);
     }
   }}
 >
   <Button
     type=&#39;primary&#39;
     icon={<CopyOutlined />}
   />
 </CopyToClipboard>

document.execcommand("copy")——has been deprecated

But it seems that some browsers can still use it, see the document

for details I I have never used this method, and I don’t know what the pitfalls are.

How to use

<button id="btn"  style="margin-top: 40px;">一键复制</button>const btn = document.querySelector(&#39;#btn&#39;);
  btn.addEventListener(&#39;click&#39;, () => {
      const textarea= document.createElement(&#39;textarea&#39;);
      textarea.setAttribute(&#39;readonly&#39;, &#39;readonly&#39;);
      textarea.value = &#39;xxxxx&#39;;
      document.body.appendChild(textarea);
      textarea.select();
      if (document.execCommand(&#39;copy&#39;)) {
          document.execCommand(&#39;copy&#39;);
          alert(&#39;复制成功&#39;);
      }
      document.body.removeChild(textarea);
  })

copy-js library

I just found this library and have never used it, but I looked at the bottom of the source code Also used

document.execcommand("copy") 1. Install

// npm包下载npm install copy-js --save// CDN导入<script src="//cdn.rawgit.com/duyetdev/copy.js/master/dist/copy.min.js"></script>

2. Use

import copy from 'copy-to-clipboard';copy('hello world', function(err) {
    if (err) console.log('Some thing went wrong!');
 
    console.log('Copied!');});

navigator.clipboard. writeText(e)

This method also has pitfalls. The development time is relatively short, and there is no specific study of the reasons.

The parameter e of this method needs to get the value of the input text box and copy it. Node

However, this method may have limitations in the in-end browser of some applications. It can be used in normal browsers, but for example, it is now available in the Feishu end-end browser. There is no clipboard object. It still depends on the usage scenario.

1. How to use

const { Search } = Input;const copyLink = (e: any) => {
  navigator.clipboard.writeText(e).then(
    () => {
      message.success(intl.t('复制成功'));
      console.log(e);
    },
    () => {
      message.error(intl.t('复制失败，请稍后再试'));
    },
  );};


 <Search
   bordered={false}
   value={window.location.href}
   enterButton={intl.t(&#39;复制链接&#39;)}
   size=&#39;middle&#39;
   onSearch={copyLink}
 />

There may be other methods that I haven’t thought of yet

Recommended learning: "

react video tutorial 》

The above is the detailed content of How to implement copy function in react. For more information, please follow other related articles on the PHP Chinese website!