Clipboard API: Copy and Paste in React

navigator.clipboard.writeText(text) writes a string to the system clipboard and returns a Promise. It is the modern replacement for the legacy execCommand approach. Always await the Promise and handle the potential rejection, for example when the user denies clipboard access.

navigator.clipboard.readText() reads the current clipboard content as a string and also returns a Promise. Reading requires the clipboard-read permission, which the browser prompts the user to grant. In practice, clipboard read is used less often than write in typical React applications.

Browsers enforce that clipboard.writeText can only be called within a user gesture handler, such as a click or keydown event. Calling it inside a useEffect or asynchronously after the gesture will throw a security error. Always trigger the write directly from an onClick handler.

The standard pattern is: user clicks a copy button, your handler calls navigator.clipboard.writeText(value), on success you set a copied state to true, and the button temporarily shows a checkmark or "Copied!" label. After a short delay the button returns to its normal state.

Encapsulate the logic in a useCopyToClipboard hook that returns a tuple: [copied, copyFn]. The copied boolean drives the UI feedback, and copyFn accepts the text to copy. The hook handles the async write and any error internally so components stay simple.

Inside the hook, after a successful copy set setCopied(true) and schedule a reset with setTimeout(() => setCopied(false), 2000). Store the timeout ID and clear it in a useEffect cleanup to prevent state updates after unmount. This avoids the "cannot update state on an unmounted component" warning.

Older browsers and non-HTTPS pages do not support the Clipboard API. The legacy fallback creates a temporary textarea, sets its value, appends it to the body, calls document.execCommand('copy'), and removes the element. This approach is synchronous and works everywhere, though it is deprecated.

Before using the Clipboard API, check: navigator.clipboard && typeof navigator.clipboard.writeText === 'function'. If unavailable, fall back to the legacy execCommand approach. This defensive check prevents runtime errors in environments where the API is not supported.

Clipboard read requires user permission via the Permissions API. You can query the current state: navigator.permissions.query({ name: 'clipboard-read' }) returns a PermissionStatus with a state of granted, denied, or prompt. The browser will prompt automatically when you call readText().

The Clipboard API is only available in secure contexts (HTTPS or localhost). On HTTP pages, navigator.clipboard is undefined. This is a security restriction because clipboard content can be sensitive. Always check the availability of the API before referencing its methods to avoid null reference errors.

jsdom (used by Jest) does not implement the Clipboard API. Mock it in your test setup: Object.assign(navigator, { clipboard: { writeText: jest.fn().mockResolvedValue(undefined) } }). This lets you test that your component calls writeText with the correct argument without a real browser environment.

When can navigator.clipboard.writeText() be safely called in the browser?

Use navigator.clipboard.writeText() inside a click handler to copy text. Build a useCopyToClipboard hook returning [copied, copyFn] with a timed reset. Always check API availability, provide an execCommand fallback for older browsers, and mock navigator.clipboard in Jest tests.