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.
`copied`	`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 "@nature-ui/core";

Usage#

function Example() {
  const [value, setValue] = React.useState("");
  const { copied, onCopy } = useClipboard(value);

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