useClipboard
useClipboard is a custom hook that handles copying content to clipboard.
Import#
import { useClipboard } from '@dwarvesf/react-hooks'
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 . |
Usage#
function Example() {const [value, setValue] = React.useState('Hello world')const { hasCopied, onCopy } = 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 width="100%" /><EditableInput /></Editable></>)}
Parameters#
The useClipboard hook accepts a single value param:
| Name | Type | Default | Description |
|---|---|---|---|
value | string | _ | The copied value. |