useClipboard

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

The useClipboard hook returns an object with the following fields:

Name	Type	Default	Description
`value`	string		The copied value
`onCopy`	function		Action to copy content
`hasCopied`	boolean	false	True if the content has been copied to clipboard.

import { useClipboard } from 'minerva-ui';

Usage


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

  return (
    <>
      <Flex mb={2}>
        <Input value={value} onChange={e => setValue(e.target.value)} />
        <Button onClick={onCopy} ml={2}>
          {hasCopied ? 'Copied' : 'Copy'}
        </Button>
      </Flex>
      <Input placeholder="Paste here" />
    </>
  );
}
function Example() {
  const [value, setValue] = useState('Hello World');
  const { onCopy, hasCopied } = useClipboard(value);
  return (
    <>
      <Flex mb={2}>
        <Input value={value} onChange={e => setValue(e.target.value)} />
        <Button onClick={onCopy} ml={2}>
          {hasCopied ? 'Copied' : 'Copy'}
        </Button>
      </Flex>
      <Input placeholder="Paste here" />
    </>
  );
}

useClipboard

Usage#

Usage