---
title: useClipboard
description: "`useClipboard`は、値をクリップボードにコピーする処理を行うカスタムフックです。"
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-clipboard
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-useclipboard--basic
---

```tsx
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>
)
```

## 使い方

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

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

```tsx
import { useClipboard } from "@workspaces/ui"
```

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

### 初期値を使う

```tsx
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>
)
```

### 所要時間を変更する

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

```tsx
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>
)
```

### 指定した値をコピーする

```tsx
const { onCopy, copied } = useClipboard()

const value = "Read-Only Value"

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