How to create copy button in react js?

Hi Friends 👋,

Welcome To aHoisting!

To create copy button in react js, you can use button tag and in onclick event navigator.clipboard.writeText(text) to create copy button in react js.

Today, I am going to show you, how to create copy button in react js.

Table of contents

• Install and create a new React app.
• Import react component.
• Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React, { useRef } from 'react';

Step 3: Create a Component.

You can use navigator.clipboard.writeText(text) to create copy button in react js.

<div>
  <input ref={inputRef} type="text" placeholder="Enter text here" />
  <button onClick={handleCopy} style={{ cursor: 'pointer', marginLeft: '10px' }}>
        Copy
  </button>
</div>

Create copy button example.

The below code is an example of a React. You have to import react and use button tag and in onclick event navigator.clipboard.writeText(text) to create copy button in react js.

App.js

import React, { useRef } from 'react';

const CopyButton = () => {
  const inputRef = useRef();

  const handleCopy = () => {
    const text = inputRef.current.value;
    navigator.clipboard.writeText(text)
      .then(() => alert('Text copied to clipboard!'))
      .catch((err) => console.error('Failed to copy text: ', err));
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Enter text here" />
      <button onClick={handleCopy} style={{ cursor: 'pointer', marginLeft: '10px' }}>
        Copy
      </button>
    </div>
  );
};

export default CopyButton;

In the above code example, I have used the navigator.clipboard.writeText(text) to create copy button in react js.

Check the output of the above code.

All the best 👍