useClipboard

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

Arguments#

The useClipboard hook takes the following arguments:

NameTypeRequiredDescription
textstringtrueThe text or value that is to be copied.
optionsOrTimeoutnumber or objectfalseThe 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:

NameTypeDefaultDescription
valuestringThe copied value.
onCopyfunctionCallback function to copy content.
hasCopiedbooleanfalseIf 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>
</>
)
}

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel