[Edit]

React - clipboard events

1 contributors

2 contributions

0 discussions

3 points

Created by:

FryerTuck

649

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:

xxxxxxxxxx
 
// 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 );