useClipboard

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

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 .

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>
</>
)
}
Edit this page

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel