Creating a Copy-Paste Functionality in React: A Step-by-Step Guide.

Adding copy and pasting the text feature to your website is very handy, it simplifies the process for the users, but are you finding difficulty in implementing it?

In this article, I’ve given step-by-step instructions on how to implement copy-paste text functionality.

I’ve mentioned the Github repo link at the end of the article.

Project Demo:

1. Import the required dependencies.

    import { useRef } from 'react'
    import React from 'react'
    import ClipboardJS from 'clipboard'
   

   The useRef hook is used to access the text area element, ClipboardJS is a library for working with clipboard.

2. Define the functional component CopyPaste that returns a form with a text area and two buttons.

    function CopyPaste() {
      const textAreaRef = useRef(null)
      ...
      return (
        <div style={{ color: 'white' }}>
          <form>
            <label htmlFor="name">Name:</label>
            <input
              type="text"
              ref={textAreaRef}
              id="name"
              className="form-control mb-2"
            />
            <button
              className="btn btn-outline-warning m-2 btn-copy"
              data-clipboard-target="#name"
            >
              Copy
            </button>
            <button
              className="btn btn-outline-info m-2"
              onClick={pasteFromClipboard}
            >
              Paste
            </button>
          </form>
        </div>
      )
    }
   

   The text area is created with the input element and the ref attribute is set to the textAreaRef to access it in the component.

3. Implement the copy functionality.

      React.useEffect(() => {
        new ClipboardJS('.btn-copy', {
          text: function(trigger) {
            return trigger.getAttribute('aria-label')
          }
        })
      }, [])
   

   Here, the useEffect hook is used to call the ClipboardJS constructor when the component is mounted. The .btn-copy selector is used to select the copy button, and the text in the text area with the id of name will be copied when the button is clicked.

4. Implement the paste functionality.

    const pasteFromClipboard = (e) => {
      e.preventDefault()
      navigator.clipboard
        .readText()
        .then((text) => {
          textAreaRef.current.value = text
        })
        .catch((error) => {
          console.error(error)
        })
    }
   

   The pasteFromClipboard function reads the text from the clipboard using navigator.clipboard.readText and updates the value of the text area with the returned text. The e.preventDefault is used to prevent the default behavior of the form submit.

5. Export the component.

    export default CopyPaste
   

6. The final code should look like this:

    import { useRef } from 'react'
    import React from 'react'
    import ClipboardJS from 'clipboard'
   
    function CopyPaste() {
      const textAreaRef = useRef(null)
   
      React.useEffect(() => {
        new ClipboardJS('.btn-copy', {
          text: function(trigger) {
            return trigger.getAttribute('aria-label')
          }
        })
      }, [])
   
      const pasteFromClipboard = (e) => {
        e.preventDefault()
        navigator.clipboard
          .readText()
          .then((text) => {
            textAreaRef.current.value = text
          })
          .catch((error) => {
            console.error(error)
          })
      }
   
      const copyToClipboard = (e) => {
        e.preventDefault()
      }
   
      return (
        <div style={{ color: 'white' }}>
          <form>
            <label htmlFor="name">Name:</label>
            <input
              type="text"
              ref={textAreaRef}
              id="name"
              className="form-control mb-2"
            />
            <button
              className="btn btn-outline-warning m-2 btn-copy"
              data-clipboard-target="#name"
              onClick={copyToClipboard}
            >
              Copy
            </button>
            <button
              className="btn btn-outline-info m-2"
              onClick={pasteFromClipboard}
            >
              Paste
            </button>
          </form>
        </div>
      )
    }
   
    export default CopyPaste
   

   GitHub Repository Link: https://github.com/vishwanath16/React-Copy-Paste-Example

How to run the project?

Getting Started

To run the project, follow these steps:

1. Clone the repository

git clone https://github.com/vishwanath16/React-Copy-Paste-Example.git

2. Install dependencies

cd react-copy-paste npm install

3. Start the development server

npm start

The project will be running at http://localhost:3000/.

Prerequisites

You will need the following tools to run this project:

• Node.js

• npm (Node Package Manager)

Built With

• React — A JavaScript library for building user interfaces

• ClipboardJS — A modern approach to copy text to clipboard