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


The useClipboard hook takes the following arguments:

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:

valuestringThe copied value.
onCopyfunctionCallback function to copy content.
copiedbooleanfalseIf 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 { useClipboard } from "@nature-ui/core";


function Example() {
const [value, setValue] = React.useState("");
const { copied, onCopy } = useClipboard(value);
return (
<Stack spacing="1rem" row>
placeholder="text to be copied..."
onChange={(e) => setValue(}
<Button onClick={onCopy} className="bg-primary-500 mb-2">
{copied ? "Copied" : "Copy"}
<FormControl id="first-name">
<Input placeholder="Paste here" />