useClipboard is a custom hook that handles copying content to clipboard.

Arguments

The useClipboard hook takes the following arguments:

Return value

The useClipboard hook returns an object with the following fields:

Import

import { useClipboard } from '@passfort/castle'
content_copy
Copy

Usage

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

  return (
    <>
      {/* 
      
      TODO, here is chakra example: 


      <Flex mb={2}>
        <Input value={value} isReadOnly placeholder="Welcome" />
        <Button onClick={onCopy} ml={2}>
          {hasCopied ? 'Copied' : 'Copy'}
        </Button>
      </Flex>
      <Editable placeholder="Paste here">
        <EditablePreview width="100%" />
        <EditableInput />
      </Editable> 
      
      
      */}
    </>
  )
}
function Example() {
  const [value, setValue] = React.useState('Hello world')
  const { hasCopied, onCopy } = useClipboard(value)

  return (
    <>
      {/* 
      
      TODO, here is chakra example: 


      <Flex mb={2}>
        <Input value={value} isReadOnly placeholder="Welcome" />
        <Button onClick={onCopy} ml={2}>
          {hasCopied ? 'Copied' : 'Copy'}
        </Button>
      </Flex>
      <Editable placeholder="Paste here">
        <EditablePreview width="100%" />
        <EditableInput />
      </Editable> 
      
      
      */}
    </>
  )
}
content_copy
Copy
live example