Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

useClipboard

useClipboardは、値をクリップボードにコピーする処理を行うカスタムフックです。

ソース@yamada-ui/use-clipboard

インポート

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

使い方

編集可能な例

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!

初期値を使う

編集可能な例

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!

タイムアウトを制御する

編集可能な例

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!

指定した値をコピーする

編集可能な例

const { onCopy, hasCopied } = useClipboard()

const value = "孫悟空"

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

GitHubでこのページを編集する

前useBreakpointValue次useColorMode