React Copy to Clipboard Functionality

We can also use the usehooks-ts library to implement the React Copy to Clipboard function. The useCopyToClipboard hook in the library can be used to implement the copy function. The hook has a syntax similar to the useState() hook in react. The hook has a state and a function and can be implemented as follows,

The copy function is used to copy the text and the value is used to store the copied value. The useCopyToClipboard() hook uses the navigator.clipboard object to implement the react copy to clipboard feature. Information about the navigator object is discussed in the Clipboard API section.

Installation

The react-copy-to-clipboard can be installed using the npm package. The following command can be used to install the package,

If you are using the yarn package manager, you can install the package using the following command,

The usehook-ts library is written in typescript and can be installed with yarn or npm packet manager using the following command,

If you are using Typescript in your project, you will have to download the respective types along with the package. We can add the @types/ tag before the name of the package to add types for the package. We can install the types with npm using the following package,

About JavaScript Clipboard API

• Javascript has a default Clipboard API to perform commands that read and write from the clipboard like cut, copy, and past. This can be utilized for the copy to clipboard react.
• The navigator instance has information about the system and the user. The navigator.clipboard property passes the read-only property of the clipboard to the navigator object and returns a clipboard instance. This clipboard instance has the function to copy or paste text to the clipboard.
• The clipboard instance is associated with the permission API to check if there are adequate permissions for the browser to access the clipboard of the system. There are two permissions, such as clipboard read and clipboard write associated with the clipboard object.
• We can check the permissions using the query() function of the navigator.permissions interface.

The following javascript code can be used to perform a simple read or copy operation to the clipboard in a copy to clipboard react application,

All the functions of the navigator.clipboard instance are asynchronous and therefore can be chained using the then() and catch() functions.

To check permission on whether we can copy text to the clipboard, the following code can be used,

Explanation

• The clipboard-write is the name of the permission that allows copy operation.
• The query() function returns a promise that eventually resolves to the PermissionStatus object with a state that describes the results of the query.
• The state can be any granted, prompt, or denied. The prompt state is usually present in cameras and microphones where the browser will ask the user for permission through a prompt message.
• Similarly we can use the clipboard-read to check if we can read data from the clipboard in a copy to the clipboard react application.

We can also read text from the clipboard using the navigator.clipboard.readText() function. There is also a read() and write() function that can be used, if we want to read other data than text.

Basic Setup

A new copy to clipboard project can be created using the npx command.

The above command will take some time to run as it installs all the dependencies that are required for creating a react application and set the scripts that are required to run the react application to test locally and build the production application.

After the command is executed successfully, a new folder named name-of-react-app will be created and we can navigate to the folder using the cd command,

Structure of the Project

On exploring the folders, you can see the src folder in which all the coding should be done, and a public folder. The packages.json maintains a record of all the dependencies of the project.

We will keep a relatively simple project structure and create the example application in the App.js file. The index.js file has the code to render the component that is created in the App.js file to the browser.

Implementation

To create a react copy to clipboard application, we must install the react-copy-to-clipboard library using the npm package manager. This example uses the material UI library for implementing text fields, buttons, and snack bar elements.

Code: using the react-copy-to-clipboard library

Explanation

• The CopyToClipboard is used to copy the text that is present in the text state when the button is pressed.
• The copyState is set to true when the text is copied by the onCopy() function and this triggers a snack bar that closes automatically in three seconds.

We can also use the useCopyToClipboard hook from the usehooks-ts library to implement the copy to clipboard function in react. This library can also be installed using the npm library.

Code: Using the usehooks-ts library

Explanation

• The useCopyToClipboard() hook has a copy() function to copy data and a value state to store the copied value.
• The data in the text field is copied using the copy function when the button is pressed.
• The snackbar is triggered after the text is copied and shows a success message along with the text copied.

We can also use the useCopy hook to perform the react copy to clipboard operation for static data. The hook can be installed by using the npm install use-copy command.

Steps to Run the Function

The copy to clipboard reacts application can be run on a local environment using the npm start command. The npm start command will run the react-scripts start command which renders the react application on the browser.

After running the command, react will open the browser automatically. If it doesn't navigate to http://localhost:3000/ on the browser to see the website.

Final Output

The image shows the final output of react copy to clipboard function.