react-copy-to-clipboard 复制粘贴

CopyText.tsx

import { CheckOutlined, CopyOutlined } from "@ant-design/icons";
import { message } from "antd";
import { useState } from "react"
import { CopyToClipboard } from 'react-copy-to-clipboard'

interface IProps {
    text: string
}
const CopyText = (props: IProps) => {
    const [copied, setCopied] = useState(false);
    return (
        <CopyToClipboard text={props?.text}
            onCopy={() => {
                setCopied(true);
                message.success('复制成功')
            }}//转换图标
        // onCopy={()=>{message.success('复制成功')}} //直接提示成功
        >
            {
                copied
                    ?
                    <CheckOutlined style={{ color: '#52c41a' }} />
                    :
                    <CopyOutlined />
            }
        </CopyToClipboard>
    )

}

export default CopyText

使用

import CopyText from './Copy'
   <CopyText text='复制这一段文字' />