Copy

Copy an element #

Copy the content from another HTML element by creating a ref and passing it to useCopyText.

You can pass a timeout value (in milliseconds) to "reset" the copied value.

function() {
  const copyRef = React.useRef()
  const [copy, copied] = useCopyText(copyRef, 2000)

  return (
    <>
      <div ref={copyRef}>This text will be copied</div>
      <Button onClick={copy} mt="sm">
        {copied ? (
          <>
            <CheckIcon />
            <span>Copied!</span>
          </>
        ) : (
          <>
            <LinkIcon />
            <span>Copy text</span>
          </>
        )}
      </Button>
    </>
  )
}
Copy

Copy a string #

You can also copy a simple string

function() {
  const url = typeof window !== 'undefined' && window.location.href
  const [copy, copied] = useCopyText(url, 2000)

  return (
    <>
      <Button onClick={copy} variant={copied ? 'tertiary' : 'secondary'}>
        {copied ? (
          <>
            <CheckIcon />
            <span>Copied!</span>
          </>
        ) : (
          <>
            <LinkIcon />
            <span>Copy URL</span>
          </>
        )}
      </Button>
    </>
  )
}
Copy

Packages #

Dependencies #

Peer dependencies #