React - clipboard events

In this article, we would like to show you clipboard events in React.

There are three clipboard events:

• onCopy
• onCut
• onPaste

In the example below, we create three functions that handle onClick, onCut, and onPaste events by displaying in the console which action has been performed.

Runnable example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines while working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const App = () => {
  const handleCopy = () => {
    console.log('you copied text!');
  };

  const handleCut = () => {
    console.log('you cut text!');
  };

  const handlePaste = () => {
    console.log('you pasted text!');
  };

  return (
    <div>
      <div>
        <label>You can copy/cut text from here: </label>
        <input
          type="text"
          onCopy={handleCopy}
          onCut={handleCut}
          onPaste={handlePaste}
          defaultValue="Try to copy or cut this text"
        />
      </div>
      <div>
        <label>You can paste text here: </label>
        <input
          type="text"
          onCopy={handleCopy}
          onCut={handleCut}
          onPaste={handlePaste}
        />
      </div>
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );