useCopy

点击复制功能

import { message } from 'antd'
import ClipboardJS from 'clipboard'
import { DependencyList, useEffect, useRef } from 'react'

export const useCopy = <
  Button extends HTMLElement = any,
  Target extends HTMLElement = any
>(
  init: (cp: ClipboardJS) => void | VoidFunction = cp => {
    cp.on('success', () => message.success('复制成功'))
  },
  deps: DependencyList = []
) => {
  const ref = useRef<Button>()
  const targetRef = useRef<Target>()
  useEffect(() => {
    const targetId = `Clipboard-Target-${Date.now()}`
    if (ref.current) {
      ref.current.setAttribute('data-clipboard-target', `#${targetId}`)
    } else {
      return
    }
    if (targetRef.current) {
      targetRef.current.id = targetId
    } else {
      ref.current.id = targetId
    }
    const cp = new ClipboardJS(ref.current)
    init && init(cp)
    return () => cp.destroy()
  }, deps)
  return {
    button: ref,
    target: targetRef,
  }
}

example:

const copy = useCopy()

<div ref={copy.target}>内容</div>
<div ref={copy.button}>按钮</div>