useClipboard

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

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

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

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

import { useClipboard } from "@/components/ui"

import { useClipboard } from "@workspaces/ui"

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

初期値を使う

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

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

所要時間を変更する

所要時間を変更する場合は、第2引数に数値(ミリ秒)を設定します。デフォルトでは、1500が設定されています。

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

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

指定した値をコピーする

const { onCopy, copied } = useClipboard()

const value = "Read-Only Value"

return (
  <HStack>
    <Input readOnly value={value} />
    <Button onClick={() => onCopy(value)}>{copied ? "Copied" : "Copy"}</Button>
  </HStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。