React: Copy to Clipboard

June 28, 2021, 8:29 p.m.
React · 3 min read
React: Copy to Clipboard

Adding a React "Copy to Clipboard" function is easy enough. It can be done inline or called as a method.

 

Basics of the React Copy to Clipboard event handler

onClick React event

onClick={}

Start with a onClick React event.

 

Inline event handler

onClick={() => {navigator.clipboard.writeText("http://localhost:3000/")}}

The arrow function is the React event handler, contained within curly braces. 

Add navigator.clipboard to access the system clipboard and write the text "http://localhost:3000/" as the contents of the clipboard.

 

Event handler as a method

copy() {
    navigator.clipboard.writeText("http://localhost:3000/");
}


onClick ={this.copy}

Another way is to place the event handler as a separate method and call it when necessary.

 

Inline event handler with an alert

onClick={() => {navigator.clipboard.writeText("http://localhost:3000/"); alert("Copied to clipboard.");}}

Feel free to add an alert in addition to the clipboard functionality.

 

Event handler method with an alert

copy() {
    navigator.clipboard.writeText("http://localhost:3000/");
    alert("Copied to clipboard.");
}

onClick ={this.copy}

You can of course also add an alert to the method. 

 

Examples of React Copy to Clipboard

Inline event handler

The inline onClick event handler works well for functional components. 

Event handler inline within a functional component

function App() {
  return (
    <div className="App" class="p-6 bg-black">
      <a onClick={() => {navigator.clipboard.writeText("http://localhost:3000/"); alert("Copied to clipboard.");}} class="bg-white hover:bg-gray-200 text-black py-2 px-4 rounded inline-flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </svg>
        Copy
      </a>
    </div>
  );
}

export default App;

This code was added to the React Tailwind project. Feel free to add it to any other component.

The button can be found in 7 TailwindCSS buttons

 

Method event handler

Event handler as a method in the class component

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  copy() {
    navigator.clipboard.writeText("http://localhost:3000/");
    alert("Copied to clipboard.");
  }
  render() {
    return (
      <div className="App" class="p-6 bg-black">
        <button onClick={this.copy} class="bg-white hover:bg-gray-200 text-black py-2 px-4 rounded inline-flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
          Copy
        </button>  
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Or good practice is to separate the event handler as a method in a class component.

Both inline and method event handlers work. 

 

When you're done, you can click the button and copy the text to the clipboard.

React copy to clipboard with alert






Post a Comment
Join the community

0 Comments
1
Jaysha
Written By
Jaysha
Hello! I enjoy learning about new CSS frameworks, animation libraries, and SEO.