What is onCutCapture Event in ReactJS ?

React onCutCapture is an event handler that gets triggered whenever we cut a text. like oncut, but the difference is that onCutCapture acts in the capture phase whereas onCut acts in the bubbling phase i.e. phases of an event.

Prerequisites:

• NodeJS or NPM
• ReactJS

Syntax:

<input onCutCapture={function}/>

Steps to Create the React Application:

Step 1: Create a react project folder

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it using the following command.

cd project

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
  }

Example: In this example, we are creating an input field with the default value “Cut the text”. When we cut (Ctrl+X) a particular text in the input field the onCutCapture event will call onCutCaptureHandler, a function that will show the text “Cut the text” in the console.

Javascript

function App() {
    const onCutCaptureHandler = () => {
        console.log("Cut the text");
    };
    return (
        <div className="App">
            <h1> Hey Geek!</h1>
            <input
                defaultValue="Cut the text"
                onCutCapture={onCutCaptureHandler}
            ></input>
        </div>
    );
}

export default App;

Step to Run the Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Output