Copying text to the clipboard in React JS is a common requirement in web applications, and React.js provides an easy way to accomplish this task. In this article, we will explore different methods to copy text to the clipboard in a React.js application.
Prerequisite for React JS Clipboard
Table of Content
Steps to create the React application
Step 1:Â Create React ProjectÂ
npm create-react-app react-copy-text
Step 2:Â Change your directory and enter the react-copy-text directory by typing the given command in the terminal.
cd react-copy-text
Step 3: Install the dependencies required in this project by typing the given command in the terminal.
npm i --save styled-components react-copy-to-clipboard
Project Structure:
The updated dependencies in package.json will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"copy-to-clipboard": "^3.3.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"styled-components": "^6.0.9",
"web-vitals": "^2.1.4"
}
Approach 1: Using react-copy-to-clipboard
To copy text to the clipboard in React we will use the React library react-copy-to-clipboard which enables the copying of any text from the input box or value stored in any component.
Example: Created to input box and link the first input box value to a useState hook instance. Pass this value in teh copy method that trrigers when the given button is clicked.
Javascript
// Filename - App.jsÂ
import Clipboard from "./components/Clipboard.js";Â
function App() {Â Â Â Â return <Clipboard />;}Â Â Â
export default App; |
Javascript
//Filename - components/Clipboard.jsÂ
import React, { useState } from "react";import copy from "copy-to-clipboard";import {    Heading,    Input1,    Input2,    Container,    Button,} from "./Styles";Â
const Clipboard = () => {Â Â Â Â const [copyText, setCopyText] = useState("");Â
    const handleCopyText = (e) => {        setCopyText(e.target.value);    };Â
    const copyToClipboard = () => {        copy(copyText);        alert(`You have copied "${copyText}"`);    };Â
    return (        <div>            <Heading>neveropen </Heading>Â
            <Container>                <h2> Copy To Clipboard in React JS</h2>Â
                <Input1                    type="text"                    value={copyText}                    onChange={handleCopyText}                    placeholder="Enter the text you want to copy"                />Â
                <Button onClick={copyToClipboard}>                    Copy to Clipboard                </Button>Â
                <Input2                    type="text"                    placeholder="Enter the text you have copied"                />            </Container>        </div>    );};Â
export default Clipboard; |
Javascript
// Filename - Styles.jsÂ
import styled from "styled-components";Â
export const Container = styled.div`Â Â Â Â padding: 2%;Â Â Â Â max-width: 600px;Â Â Â Â margin: 40px auto;Â Â Â Â position: relative;Â Â Â Â text-align: center;`;export const Heading = styled.h1`Â Â Â Â text-align: center;Â Â Â Â color: green;Â Â Â Â font-size: 40px;`;Â
export const Input1 = styled.input`Â Â Â Â height: 50px;Â Â Â Â width: 80%;Â Â Â Â padding: 0;Â Â Â Â font-size: 25px;Â Â Â Â border-radius: 5px;`;export const Input2 = styled.input`Â Â Â Â height: 50px;Â Â Â Â width: 80%;Â Â Â Â padding: 0;Â Â Â Â font-size: 25px;Â Â Â Â margin-top: 50px;Â Â Â Â border-radius: 5px;`;Â
export const Button = styled.button`Â Â Â Â padding: 10px;Â Â Â Â font-size: 20px;Â Â Â Â position: relative;Â Â Â Â // left: 30%;Â Â Â Â margin-top: 10px;Â Â Â Â cursor: pointer;Â Â Â Â color: white;Â Â Â Â background-color: green;Â Â Â Â border-radius: 10px;`; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Approach 2: Using Navigator.clipbord method
Example:This approach includes the use of navigator.clipboard.writeText method to write the data. The value in the textbox will be copied to clipboard when the button is clicked.
Javascript
// Filename - App.jsÂ
import Clipboard from "./components/Clipboard.js";import "./App.css";Â
function App() {Â Â Â Â return <Clipboard />;}Â
export default App; |
Javascript
//Filename - components/Clipboard.jsimport React, { useState } from "react";Â
const Clipboard = () => {Â Â Â Â const [text, setText] = useState(Â Â Â Â Â Â Â Â "Add text you want to copy"Â Â Â Â );Â
    const handleCopyClick = async () => {        try {            await navigator.clipboard.writeText(text);            alert("Copied to clipboard!");        } catch (err) {            console.error(                "Unable to copy to clipboard.",                err            );            alert("Copy to clipboard failed.");        }    };Â
    return (        <div className="App">            <h1 className="neveropen">neveropen</h1>            <textarea                value={text}                onChange={(e) => setText(e.target.value)}            />            <br />            <button onClick={handleCopyClick}>                Copy to Clipboard            </button>            <textarea />        </div>    );};Â
export default Clipboard; |
CSS
* {Â Â Â Â margin: 0;Â Â Â Â padding: 0;Â Â Â Â box-sizing: border-box;}Â
.App {Â Â Â Â width: 100%;Â Â Â Â max-width: 90%;Â Â Â Â margin: auto;Â Â Â Â text-align: center;}.neveropen {Â Â Â Â text-align: center;Â Â Â Â color: green;Â Â Â Â font-size: 40px;}Â
textarea {Â Â Â Â height: 50px;Â Â Â Â width: 80%;Â Â Â Â padding: 0;Â Â Â Â font-size: 25px;Â Â Â Â border-radius: 5px;Â Â Â Â margin: auto;Â Â Â Â margin-top: 2%;}button {Â Â Â Â margin: 2%;Â Â Â Â padding: 10px;Â Â Â Â font-size: 20px;Â Â Â Â position: relative;Â Â Â Â /* // left: 30%; */Â Â Â Â margin-top: 50px;Â Â Â Â cursor: pointer;Â Â Â Â color: white;Â Â Â Â background-color: green;Â Â Â Â border-radius: 10px;} |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
