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></>)}