React: Copy to Clipboard When Click a Button/Link

Last updated on June 14, 2021 The Plumber Loading... Post a comment

This article shows you how to copy some text to the clipboard when a user clicks a certain button or link in your React application. We are going to walk through 2 complete examples corresponding to 2 different implementations. The first one uses navigator.clipboard.writeText and the useState hook. The second one uses a third-party library.

Example 1: Using Self-Written Code

Example preview

The React app we are going to build is simple. It contains a text field and a button. When the text field is empty, the button is disabled. When you type something into the text field, the button will become clickable. Once the button is clicked, the text you have entered in the text field will be copied to the clipboard and you can paste this thing in the place you want.

The complete code

// App.js
import { useState} from 'react'

const App = () => {
  const [text, setText] = useState('');

  const inputHandler = event => {
    setText(event.target.value);
  }

  const copy = async () => {
    await navigator.clipboard.writeText(text);
    alert('Text copied');
  }

  return <div style={styles.container}>
    <input type="text" value={text} onChange={inputHandler} />
    <button onClick={copy} disabled={!text}>Copy To Clipboard</button>
  </div>;
};

export default App;

const styles = {
  container: {
    margin: '10%'
  }
}

navigator.clipboard.writeText supported by all modern browsers but it will not work on the old Internet Explorer. Although the number of users of this ancient browser is extremely rare, if you want your app to work perfectly on it, use:

window.clipboardData.setData("Text", 'Message')

Example 2: Using a third-party Libary

There are several packages that can help us get the task done. The most popular ones are clipboard.js and copy-to-clipboard. In this example, we are going to install and use clipboard.js.

npm i clipboard

Example preview

This example implement both copy-to-clipboard and cut-to-clipboard.

The complete code

// App.js
import ClipboardJS from "clipboard";

new ClipboardJS(".button");

const App = () => {
  return (
    <div style={styles.container}>
      <input id="input" type="text" />
      <button
        className="button"
        data-clipboard-action="copy"
        data-clipboard-target="#input"
      >
        Copy To Clipboard
      </button>
      <button
        className="button"
        data-clipboard-action="cut"
        data-clipboard-target="#input"
      >
        Cut To Clipboard
      </button>
    </div>
  );
};

export default App;

const styles = {
  container: {
    margin: "10%",
  },
};

Conclusion

We’ve gone through 2 approaches to implement the copy-to-clipboard functionality in a React application. Choose from these the method that best suits your need. If you’d like to learn more about React and other frontend stuff, take a look at the following articles:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles