Clipboard API: Copy and Paste in React
Implement copy-to-clipboard buttons using the modern Clipboard API and fall back gracefully for older browsers.
Writing to the Clipboard
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.
Reading from the Clipboard
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.
All lessons in this course
- Clipboard API: Copy and Paste in React
- Geolocation API in React Components
- Notifications API and Permission Handling
- IntersectionObserver for Scroll-Triggered Effects