useClipboard

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

Arguments#

The useClipboard hook takes the following arguments:

NameTypeRequiredDescription
textstringfalseThe 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
valuestring or undefinedThe copied value.
setValuefunction or undefinedState action to change the 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 placeholder = "text to be copied...";
const { onCopy, value, setValue, hasCopied } = useClipboard("");
return (
<>
<Flex mb={2}>
<Input
placeholder={placeholder}
value={value}
onChange={(e) => {
setValue(e.target.value);
}}
mr={2}
/>
<Button onClick={onCopy}>{hasCopied ? "Copied!" : "Copy"}</Button>
</Flex>
<Editable placeholder="Paste here">
<EditablePreview width="100%" />
<EditableInput />
</Editable>
</>
)
}

Imperative#

Use this approach when you need to get the value to copy imperatively, e.g. getting a URL from browser or getting an input using prompt.

function Example() {
const { onCopy, hasCopied } = useClipboard();
return (
<>
<Button onClick={() => {
onCopy(window.location.href);
}}>
{hasCopied ? "URL copied!" : "Copy URL"}
</Button>
{/* or */}
<Button onClick={() => {
const userInput = prompt();
onCopy(userInput);
}}>
{hasCopied ? "User's propmt copied!" : "Copy user's propmt"}
</Button>
</>
)
}
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel