useCopy (React)

Copy text to your clipboard, and know when it's done so you can change the button's text to copied!.

typescriptjavascript
import { useState, useCallback, useRef } from 'react'
export type UseCopyProps = {
copiedTimeout?: number
}
type CopyFn = (text: string) => Promise<void>
export const useCopy = ({ copiedTimeout = 2000 }: UseCopyProps = {}): [
copy: CopyFn,
copied: boolean
] => {
const [copied, setCopied] = useState(false)
const timeoutRef = useRef<NodeJS.Timeout>()
const copy: CopyFn = useCallback(
async text => {
await navigator.clipboard.writeText(text)
setCopied(true)
if (timeoutRef.current) clearTimeout(timeoutRef.current)
timeoutRef.current = setTimeout(() => setCopied(false), copiedTimeout)
},
[copiedTimeout]
)
return [copy, copied]
}

Info

  • We use useCallback, so that if you follow hook rules and use the copy function inside a useEffect or another useCallback, you won't have code (re-)running unnecessarily.

Check out the SolidJS version here.

Created 05/02/22Updated 10/13/22
Found a mistake, or want to suggest an improvement? Edit on GitHub here
and see edit history here