Languages
[Edit]
EN

React - clipboard events

3 points
Created by:
FryerTuck
319

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

ReactJS - events

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join