{{announcement.body}}
{{announcement.title}}

How to Copy Text to Clipboard Using ReactJS

DZone 's Guide to

How to Copy Text to Clipboard Using ReactJS

In this article, we demonstrate how to use Bootstrap and npm's copy-to-clipboard library to copy text in React.

· Web Dev Zone ·
Free Resource

Introduction

In this article, we will learn how to copy text to your clipboard using ReactJS. With this, we can copy any text to the clipboard and can paste it anywhere. 

You can check my previous article in which we discussed ReactJS and its basic components from the below-mentioned links.

Prerequisites

  • Basic knowledge of React.
  • Visual Studio Code IDE.
  • Basic knowledge of Bootstrap and HTML.

Create a React Project

Let's first create a React application using the following command.

Shell


Now, open the newly created project in Visual Studio Code and install Bootstrap by using the following command:

Shell


Now, open the index.js file and import Bootstrap.

Shell


Now, install the copy-to-clipboard library using the following command:

Shell


Now, go to the src folder, create a new component named CopyBoard.js, and add the following lines in this component.  

JavaScript


Now, create a new CSS file and add the following CSS in this file.

CSS


Now, open the App.js file and add the following code:

JavaScript


Then, we can run the project and check the result.

Running initial project

Enter some text in the textbox and click on the button  

Testing initial functionality

Now, the text is copied. We can paste the text in Notepad.

Pasting text in Notepad

Summary

In this article, we learned how we can copy text to the clipboard in ReactJS applications.

Topics:
bootstrap, clipboard, copy and paste, reactjs, tutorial, web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}