useCopyToClipboard()

1import { useState } from 'react'
2
3type CopiedValue = string | null
4type CopyFn = (text: string) => Promise<boolean> // Return success
5
6function useCopyToClipboard(): [CopiedValue, CopyFn] {
7  const [copiedText, setCopiedText] = useState<CopiedValue>(null)
8
9  const copy: CopyFn = async text => {
10    if (!navigator?.clipboard) {
11      console.warn('Clipboard not supported')
12      return false
13    }
14
15    // Try to save to clipboard then save it in the state if worked
16    try {
17      await navigator.clipboard.writeText(text)
18      setCopiedText(text)
19      return true
20    } catch (error) {
21      console.warn('Copy failed', error)
22      setCopiedText(null)
23      return false
24    }
25  }
26
27  return [copiedText, copy]
28}
29
30export default useCopyToClipboard

1import { useCopyToClipboard } from 'usehooks-ts'
2
3export default function Component() {
4  const [value, copy] = useCopyToClipboard()
5  return (
6    <>
7      <h1>Click to copy:</h1>
8      <div style={{ display: 'flex' }}>
9        <button onClick={() => copy('A')}>A</button>
10        <button onClick={() => copy('B')}>B</button>
11        <button onClick={() => copy('C')}>C</button>
12      </div>
13      <p>Copied value: {value ?? 'Nothing is copied yet!'}</p>
14    </>
15  )
16}