Create a copy to clipboard button in React JS

Today in this tutorial we will learn about how to Create a copy to clipboard button in React JS. Copying text to the clipboard can improve productivity by reducing the amount of time required to perform certain tasks. For example, if a user needs to copy a complex password or URL, copying it to the clipboard can make the process faster and more accurate. So let’s get started.

Requirements

• copy-to-clipboard
• react-toastify

Step 1: Install the packages

npm install react-toastify copy-to-clipboard

Step 2: Setup react-toastify for notification

Import the react-toastify CSS file and ToastContainer component to your index.js file and call the component inside the render function.

import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ToastContainer
      position="bottom-center"
      autoClose={500}
      hideProgressBar
      newestOnTop={false}
      closeOnClick
      rtl={false}
      pauseOnFocusLoss
      draggable
      pauseOnHover
      theme="colored"
    />
    <App />
  </React.StrictMode>
);

Step 3: Add HTML element

Now paste the below code to your App.js file.

<input
        value="Text to copy"
        disabled
        type="text"
        ref={textRef}
      />

<button onClick={copyToClipboard}>Copy</button>

Step 4: Create a copyToClipboard function

Next, we need to create a function that will copy the text to the clipboard. We will use the copy-to-clipboard package to perform the copy operation.

 const copyToClipboard = () => {
    let copyText = textRef.current.value;
    let isCopy = copy(copyText);
    if (isCopy) {
      toast.success("Copied to Clipboard");
    }
  };

Here we are taking the text value from the useRef hook which is passed to the HTML element and using the copy function we are adding that text to the clipboard and finally displaying a success notification after the text is copied.

Below you can find all the code with explanations.

import { toast } from "react-toastify";
import { useRef } from "react";
import copy from "copy-to-clipboard";
import "./App.css";

function App() {
  const textRef = useRef();

  //Function to add text to clipboard
  const copyToClipboard = () => {
    // Text from the html element
    let copyText = textRef.current.value;
    // Adding text value to clipboard using copy function
    let isCopy = copy(copyText);

    //Dispalying notification
    if (isCopy) {
      toast.success("Copied to Clipboard");
    }
  };

  return (
    <div className="App">
      <input value="Text to copy" disabled type="text" ref={textRef} />

      <button onClick={copyToClipboard}>Copy</button>

      <br />
      <br />
      <textarea placeholder="Paste here the copied text"></textarea>
    </div>
  );
}

export default App;

Step 5: Add CSS to our component

Finally, add CSS to your App.css file to make it a bit prettier.

input {
  border: unset;
  background: #6e6e6e;
  padding: 5px 40px;
  color: white;

}

button {
  border: unset;
  background: black;
  color: white;
  padding: 5px 15px;
  cursor: pointer;
}

textarea {
  border: unset;
  background: #e3e3e3;
  padding: 5px 40px;
  color: black;
  width: 200px;
  height: 50px;

}

Instead of using button you can also copy icon from react-icons. Just replace the button HTML with the icon.

For any query, you can get in touch with me via LinkedIn

That’s it for today. Below I Have shared the Live code and GitHub repository for reference.

GitHub - Manntrix/copy-to-clipboard-react: Create a copy to clipboard button in React JS