useClipboard

useClipboard is a custom hook to handle copying content to clipboard.

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.
`hasCopied`	`boolean`	`false`	If `true`, the content has been copied .

Import#

import { useClipboard } from "@chakra-ui/core";

import { useClipboard } from "@chakra-ui/core";

Usage#

Paste here

function Example() {
  const [value, setValue] = React.useState("Hello world");
  const { onCopy, hasCopied } = 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 w="100%" />
        <EditableInput />
      </Editable>
    </>
  );
}

function Example() {
  const [value, setValue] = React.useState("Hello world");
  const { onCopy, hasCopied } = 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 w="100%" />
        <EditableInput />
      </Editable>
    </>
  );
}

Editable Example

Proudly made in 🇳🇬

Released under the MIT License.

useClipboard

.css-12m0k8p{pointer-events:auto;}Return value.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Import#

Usage#

Return value#