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`	`false`	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` or `undefined`		The copied value.
`setValue`	`function` or `undefined`		State action to change 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 '@hover/blueprint'

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

Blueprint

Settings