Introduction

In this article, we will learn how to copy text to Clipboard using ReactJS. Using this we 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.js
  • Visual Studio Code IDE
  • Basic knowledge Bootstarp and html

Create ReactJS project

Let's first create a React application using the following command.
  1. npx create-react-app platform
Now open the newly created project in Visual Studio Code and install Bootstrap by using the following command
  1. npm install --save bootstrap
Now, open the index.js file and import Bootstrap .
  1. import 'bootstrap/dist/css/bootstrap.min.css';
Now Install copy-to-clipboard libray using the following command.
  1. npm install save copy-to-clipboard
Now, go to the src folder and create a new component named 'CopyBoard.js' and add the following lines in this component.
  1. import React, { Component } from 'react'
  2. import copy from "copy-to-clipboard";
  3. import './CopyBoard.css';
  4. export class CopyBoard extends Component {
  5. constructor() {
  6. super();
  7. this.state = {
  8. textToCopy: "Copy to Clipboard Demo!",
  10. };
  11. this.handleInputChange = this.handleInputChange.bind(this);
  12. this.Copytext = this.Copytext.bind(this);
  13. }
  15. handleInputChange(e) {
  16. this.setState({
  17. textToCopy: e.target.value,
  18. });
  19. }
  21. Copytext() {
  22. copy(this.state.textToCopy);
  24. }
  26. render() {
  27. const { textToCopy, btnText } = this.state;
  28. return (
  29. <div className="container">
  30. <div class="row" className="hdr">
  31. <div class="col-sm-12 btn btn-info">
  32. Copy to Clipboard Demo
  33. </div>
  34. </div>
  35. <div className="txt">
  36. <textarea className="form-control" placeholder="Enter Text" onChange={this.handleInputChange} />
  37. <br />
  38. <br />
  39. <button className="btn btn-info" onClick={this.Copytext}>
  40. Copy to Clipboard
  41. </button>
  42. </div>
  44. </div>
  45. );
  46. }
  47. }
  49. export default CopyBoard
Now create a new css file and add the following css in this file.
  1. .txt
  2. {
  3. margin-bottom: 20px;
  4. margin-top: 20px;
  5. }
  6. .hdr
  7. {
  8. margin-top: 20px;
  9. }
Now open App.js file and add the following code
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import CopyExample from './CopyBoard';
  5. function App() {
  6. return (
  7. <div className="App">
  8. <CopyExample/>
  9. </div>
  10. );
  11. }
  13. export default App;
Now run the project and check the result.
How To Copy Text To Clipboard Using ReactJS
Enter some text in the textbox and click on the button
How To Copy Text To Clipboard Using ReactJS
Now text is copied, paste the text in notepad.
How To Copy Text To Clipboard Using ReactJS

Summary

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