Manually copying information, be it code snippets, URL links, or text fragments can be time-consuming and error-prone, especially on mobile devices where the screen is small. Adding a “copy to clipboard” functionality not only saves time but also reduces the potential for errors and typos.
Setting Up the Copy to Clipboard Functionality
In a React app, create a new component namedCopyButton.This component accepts text that it should copy to the clipboard.
If you don’t have a React project to work on,use the create react app utilityto scaffold one.
When clicked, the button should call a function namedcopyToClipboardthat copies the text to the clipboard.
To implement the copy functionality, you can use the clipboard API directly or use an NPM package.
This guide will show you how to use both.
Using the Clipboard API to Copy Text to a Clipboard in React
TheClipboard APIprovides a way to interact with clipboard commands such as copy, cut, and paste.
To access it, you need to use thenavigator.clipboardobject available in most modern browsers. It has several methods that allow you to write or read the contents of the clipboard.
To write to the clipboard, use thewriteTextmethod.
Let’s see how to implement this in thecopyToClipboardfunction of theCopyButtoncomponent.
ThewriteTextmethod accepts the text that it will copy to the clipboard. This method is asynchronous, so you have to use the await keyword before moving on.
If the text is copied to the clipboard, display a success message otherwise display the error message as an alert.
Checking Browser Permissions
As good practice, it’s important to ensure that the user has granted the browser permission to access the clipboard. You can check if the user has grantedclipboard-writepermission using thenavigator.permissionsWeb API before copying to the clipboard as shown below.
In the modified function above, only when the user has granted permission to write to the clipboard are writing to it. Otherwise, the function throws an error.
Using an NPM Package to Copy to Clipboard in React
If you don’t want to use the clipboard API directly, there aremultiple NPM packagesyou can use instead. For react applications, you may use thereact-copy-to-clipboardpackage. It’s pretty popular with more than 1 million weekly downloads and is also easy to use.
Install it in your React application by running the following command in the terminal:
Once installed, import theCopyToClipboardcomponent fromreact-copy-to-clipboardinto theCopyButtoncomponent.
TheCopyToClipboardcomponent accepts the text you want to copy as a prop. It also accepts a child component that when clicked triggers the copy action.
For instance, use the code below to copy to the clipboard with a button:
Note the handler function,onCopy. It accepts two arguments,textandresultwhere text is the copied text and the result is a boolean indicating whether the copy action was successful or not.
Why Use a Copy to Clipboard Function?
You’ve learned how to use the clipboard API and the react-copy-to-clipboard package to copy text to the clipboard in a React application. While the users of your application can simply select the text and use the copy functionality of your browser, clicking to copy text is more straightforward and better for the user experience.
