react hook 使用clipboard.js 複製文字

clipboard.js git 地址

先安裝
yarn add clipboard

demo如下

import React, {  useRef, useEffect, useState } from 'react';
import ClipboardJS from 'clipboard';

const Demo : React.FC<any> = () => {
    const copyBtnRef = useRef<any>(null)
    const [text, setText] = useState('https://segmentfault.com/u/yolo_y')

    let clipboard: any
    useEffect(() => {
        if(copyBtnRef.current) {
            clipboard = new ClipboardJS(copyBtnRef.current,{
                text: () => text
            });

            clipboard.on('success', function(e:any) {
                console.log('copy success')
            })
        }
        return () => clipboard?.destroy && clipboard.destroy();
    }, [copyBtnRef, text]);

    return <>
        <div>{text}</div>
        <div ref={copyBtnRef}>copy</div>
        <div onClick={() => {setText('https://segmentfault.com/a/1190000015303823')}}>change Text</div>
    </>
}

還有js原生版本的實現 引用自 原文連結：https://blog.csdn.net/weixin_...

const copyToClipboard = (value) => {
   const textarea = document.createElement('textarea');
   textarea.value = value;
   document.body.appendChild(textarea);
   textarea.select();
   document.execCommand('copy');
   document.body.removeChild(textarea);
}