What is onPasteCapture Event in ReactJS ?

React onPasteCapture is an event handler that gets triggered whenever we paste some text in an input field. like onpaste, but the difference is that onPasteCapture acts in the capture phase whereas onPaste acts in the bubbling phase i.e. phases of an event.

Prerequisites:

• NodeJS or NPM
• React JS
• Phases of JavaScript Event 

 Syntax:

<input onPasteCapture={function}/>

Steps to Create the React Application And Installing Module:

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 by using the following command.

cd project

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: This example includes an input field with the default value "Paste here!" and a <p> tag containing the text "Copy this line." Upon pasting into the input field, the onPasteCapture event triggers onPasteCaptureHandler, logging "Paste Successfully" to the console.

function App() {
    const onPasteCaptureHandler = () => {
        console.log("Pasted Successfully!");
    };
    return (
        <div className="App">
            <h1> Hey Geek!</h1>
            <p>Copy this line</p>
            <input
                defaultValue="Paste here!"
                onPasteCapture={onPasteCaptureHandler}
            ></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:

aniluom

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• React-Questions