useClipboard

useClipboard is a custom hook that handles copying content to clipboard.

Arguments

The useClipboard hook takes the following arguments:

Name	Type	Required	Description
text	string	true	The text or value that is to be copied.
optionsOrTimeout	number or object	false	The timeout as a number or an object containing 2 properties: timeout and format for the MIME type. The timeout is measured in milliseconds and has a default of 1500ms.

Return value

The useClipboard hook returns an object with the following fields:

Name	Type	Default	Description
value	string		The copied value.
onCopy	function		Callback function to copy content.
hasCopied	boolean	false	If true, the content has been copied within the last timeout milliseconds. That is, it is set to true right after onCopy is called, and false after timeout has passed.

Import

import { useClipboard } from '@chakra-ui/react'

Usage

function Example() {
  const [value, setValue] = React.useState('Hello world')
  const { hasCopied, onCopy } = useClipboard(value)

  return (
    <>
      <Flex mb={2}>
        <Input value={value} isReadOnly placeholder='Welcome' />
        <Button onClick={onCopy} ml={2}>
          {hasCopied ? 'Copied' : 'Copy'}
        </Button>
      </Flex>
      <Editable placeholder='Paste here'>
        <EditablePreview width='100%' />
        <EditableInput />
      </Editable>
    </>
  )
}