How to Copy Text to the Clipboard in Next.js ?

In the article, we will explore how to integrate text copying to the clipboard in a Next.js application using JavaScript.

In web de­velopment, the ability to copy te­xt to the clipboard holds immense value­. It empowers users to e­ffortlessly duplicate content and transfe­r it across different applications or documents. This conve­nient functionality simplifies information sharing and ele­vates user experience by facilitating seamle­ss data transfer betwee­n platforms.

Prerequisite:

• Introduction To Next.js
• Next.js Components
• React useState

Steps to create the NextJS Application:

Step 1: Create a Next.js project using the following command:

npx create-next-app my-clipboard-app

The te­rm NPX, short for Node Package eXe­cute, serves as a conve­nient NPM package runner. It allows de­velopers to effortle­ssly execute any Javascript Package­ from the NPM registry without the need for installation. NPX is automatically installed alongside NPM version 5.2.0 and above.

Step 2: Change to the directory:

cd my-clipboard-app

Project Structure:

Approach

The use­State hook is employed by the­ component to effective­ly manage the state. It kee­ps track of two essential ele­ments: the text e­ntered by the use­r, which will later be copied, and a boole­an value that indicates whethe­r or not the copying process was successful. The function handle­CopyText performs an essential task by updating the state­ of copyText with the text provide­d by the user. Similarly, the­ function copyToClipboard allows for easy copying of the value store­d in copyText to the clipboard. It accomplishes this by utilizing the­ document.execCommand(‘copy’) method.

Example: In this example, we will copy text to the clipboard Next.js

• index.js file

Javascript

import React, { useState } from 'react';

const App = () => {
    const [userInput, setUserInput] = useState('');
    const [list, setList] = useState([]);

    // Set a user input value
    const updateInput = (value) => {
        setUserInput(value);
    };

    // Add item if user input is not empty
    const addItem = () => {
        if (userInput !== '') {
            const userInputItem = {
                // Add a random id which is used to delete
                id: Math.random(),

                // Add a user value to list
                value: userInput,
            };

            // Update list
            setList([...list, userInputItem]);

            // Reset state
            setUserInput('');
        }
    };

    // Function to delete item from list using id to delete
    const deleteItem = (key) => {
        const updatedList =
            list.filter((item) => item.id !== key);
        setList(updatedList);
    };

    const editItem = (index) => {
        const editedTodo = prompt('Edit the todo:');
        if (editedTodo !== null && editedTodo.trim() !== '') {
            const updatedTodos = [...list];
            updatedTodos[index].value = editedTodo;
            setList(updatedTodos);
        }
    };

    return (
        <div
            style={{
                fontFamily: 'Arial, sans-serif',
                maxWidth: '600px',
                margin: '0 auto',
                padding: '20px',
            }}
        >
            <div
                style={{
                    textAlign: 'center',
                    fontSize: '2.5rem',
                    fontWeight: 'bold',
                    marginBottom: '20px',
                    color: 'green',
                }}
            >
                Geeksforgeeks
            </div>
            <div
                style={{
                    textAlign: 'center',
                    fontSize: '1.5rem',
                    fontWeight: 'bold',
                    marginBottom: '20px',
                }}
            >
                TODO LIST
            </div>
            <div
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    marginBottom: '20px'
                }}
            >
                <input
                    style={{
                        fontSize: '1.2rem',
                        padding: '10px',
                        marginRight: '10px',
                        flexGrow: '1',
                        borderRadius: '4px',
                        border: '1px solid #ccc',
                    }}
                    placeholder="Add item..."
                    value={userInput}
                    onChange={(item) =>
                        updateInput(item.target.value)}
                />
                <button
                    style={{
                        fontSize: '1.2rem',
                        padding: '10px 20px',
                        backgroundColor: '#4caf50',
                        color: 'white',
                        border: 'none',
                        borderRadius: '8px',
                        cursor: 'pointer',
                    }}
                    onClick={addItem}
                >
                    ADD
                </button>
            </div>
            <div
                style={{
                    background: '#f9f9f9',
                    padding: '20px',
                    borderRadius: '8px'
                }}
            >
                {list.length > 0 ? (
                    list.map((item, index) => (
                        <div
                            key={index}
                            style={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'center',
                                marginBottom: '10px',
                            }}
                        >
                            <span style={{
                                fontSize: '1.2rem',
                                flexGrow: '1'
                            }}>
                                {item.value}
                            </span>
                            <span>
                                <button
                                    style={{
                                        padding: '10px',
                                        backgroundColor: '#f44336',
                                        color: 'white',
                                        border: 'none',
                                        borderRadius: '8px',
                                        marginRight: '10px',
                                        cursor: 'pointer',
                                    }}
                                    onClick={() => deleteItem(item.id)}
                                >
                                    Delete
                                </button>
                                <button
                                    style={{
                                        padding: '10px',
                                        backgroundColor: '#2196f3',
                                        color: 'white',
                                        border: 'none',
                                        borderRadius: '8px',
                                        cursor: 'pointer',
                                    }}
                                    onClick={() => editItem(index)}
                                >
                                    Edit
                                </button>
                            </span>
                        </div>
                    ))
                ) : (
                    <div
                        style={{
                            textAlign: 'center',
                            fontSize: '1.2rem',
                            color: '#777'
                        }}
                    >
                        No items in the list
                    </div>
                )}
            </div>
        </div>
    );
};

export default App;

Step 4: To run the next.js application, execute the following command and then navigate to http://localhost:3000.

npm run dev

Output:

Copy Text To The Clipboard In NextJS