React: Copy to Clipboard When Click a Button/Link

This article shows you how to copy some text to the clipboard when a user clicks on 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. On the other hand, the second one takes advantage of 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 into 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 is 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 implements 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:

• 5 best open-source WYSIWYG editors for React
• React & TypeScript: Using useRef hook example
• React useReducer hook – Tutorial and Examples
• Using Range Sliders in React: Tutorial & Example
• React + TypeScript: Using setTimeout() with Hooks
• React + TypeScript: setInterval() example (with hooks)

You can also check our React category page and React Native category page for the latest tutorials and examples.