useClipboard

useClipboard is a custom hook that performs the operation of copying a value to the clipboard.

Import

import { useClipboard } from "@yamada-ui/react"

Copied!

Usage

Editable example

const { onCopy, value, setValue, hasCopied } = useClipboard()

return (
  <>
    <HStack gap="md">
      <Input
        placeholder="text to be copied..."
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Button onClick={onCopy}>{hasCopied ? "Copied!" : "Copy"}</Button>
    </HStack>

    <Editable placeholder="Paste here" mt="md">
      <EditablePreview width="full" />
      <EditableInput />
    </Editable>
  </>
)

Copied!

Using Initial Values

Editable example

const { onCopy, value, setValue, hasCopied } = useClipboard("initial value")

return (
  <>
    <HStack gap="md">
      <Input
        placeholder="text to be copied..."
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Button onClick={onCopy}>{hasCopied ? "Copied!" : "Copy"}</Button>
    </HStack>

    <Editable placeholder="Paste here" mt="md">
      <EditablePreview width="full" />
      <EditableInput />
    </Editable>
  </>
)

Copied!

Controlling Timeout

Editable example

const { onCopy, value, setValue, hasCopied } = useClipboard("", 5000)

return (
  <>
    <HStack gap="md">
      <Input
        placeholder="text to be copied..."
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Button onClick={onCopy}>{hasCopied ? "Copied!" : "Copy"}</Button>
    </HStack>

    <Editable placeholder="Paste here" mt="md">
      <EditablePreview width="full" />
      <EditableInput />
    </Editable>
  </>
)

Copied!

Copy the Specified Value

Editable example

const { onCopy, hasCopied } = useClipboard()

const value = "Goku"

return (
  <HStack gap="md">
    <Input value={value} isReadOnly />
    <Button onClick={() => onCopy(value)}>
      {hasCopied ? "Copied!" : "Copy"}
    </Button>
  </HStack>
)

Copied!

Edit this page on GitHub

PrevioususeBreakpointValue NextuseColorMode