All hooks / Browser APIs

useCopyToClipboard

177 B minified and brotliedSourceMarkdown✓ Works in all modern browsers

Copies text to the clipboard and reports copied for a short time, for a "Copied!" label.

copy resolves to true on success and false when the browser refuses (no permission, insecure context, or no Clipboard API). Copying again restarts the timer. The timer is cleared on unmount.

Import

import { useCopyToClipboard } from '@vincent.ri/react-tils'
// or only this hook
import { useCopyToClipboard } from '@vincent.ri/react-tils/useCopyToClipboard'

Usage

const [copy, copied] = useCopyToClipboard()
return <button onClick={() => copy(apiKey)}>{copied ? 'Copied!' : 'Copy'}</button>

Live demo

When to use it

A "Copy" button for a code snippet, link, or API key.

When not to

You need to copy rich content (HTML, images); call navigator.clipboard.write() with a ClipboardItem. Call copy from a user action (click, keypress); browsers block clipboard writes otherwise.

API

function useCopyToClipboard(resetMs?: number): [(text: string) => Promise<boolean>, boolean]

Returns [copy, copied].