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.
Prerequisite:
- Introduction and installation of ReactJS
- Phases of JavaScript Event
Syntax:
<input onPasteCapture={function}/>
Creating React Application:
Step 1: Create a react project folder, for that open the terminal, and write the command npm create-react-app folder name. If you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.
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: It will look like this:
Example: In this example, we are creating an input field having the default value “Paste here!”, and a text within the <p> tag “Copy this line”.
When we copy and paste it into our input field, the onPasteCapture event will call onPasteCaptureHandler, a function that will show the text “Paste Successfully” in the console.
App.js
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:
