How to copy text to the clipboard in React.js ?

0 0 3 minutes read

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

Using react-copy-to-clipboard
Using Navigator.clipbord method

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>zambiatek </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.js
import 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="zambiatek">zambiatek</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;
}
.zambiatek {
    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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!