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

Import

import { useClipboard } from '@sajari-ui/core';

import { useClipboard } from '@sajari-ui/core';

Usage

Editable Example

function Example() {
  const [value, setValue] = React.useState('Hello world');
  const { onCopy, hasCopied } = useClipboard(value);

  return (
    <>
      <Flex space="space-x-4" margin="mb-4">
        <TextInput value={value} readOnly placeholder="Welcome" />
        <Button appearance="primary" iconBefore="copy" onClick={onCopy}>
          {hasCopied ? 'Copied' : 'Copy'}
        </Button>
      </Flex>

      <TextInput placeholder="Paste here" />
    </>
  );
}

function Example() {
  const [value, setValue] = React.useState('Hello world');
  const { onCopy, hasCopied } = useClipboard(value);
  return (
    <>
      <Flex space="space-x-4" margin="mb-4">
        <TextInput value={value} readOnly placeholder="Welcome" />
        <Button appearance="primary" iconBefore="copy" onClick={onCopy}>
          {hasCopied ? 'Copied' : 'Copy'}
        </Button>
      </Flex>
      <TextInput placeholder="Paste here" />
    </>
  );
}