How to create 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:

Project Interface

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.

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.

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.
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.
Export the component.
```
 export default CopyPaste
```

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