Detecting Long Press Gestures with JavaScript Events in React plus Custom React Hook
Learn how to listen for and detect long press gestures in a React app. We'll walk through what events you want to listen for in React, how that differs to the default events, and how we can even wrap our functionality in a custom React hook to use long press gestures anywhere in the app!
🧐 What's Inside
00:00 - Intro
00:16 - What is a long press & tools we'll use including React
01:54 - Creating a new Next.js app from a demo starter
04:11 - Adding new event listener handlers to a button including onMouseDown, onMouseUp, onTouchStart, and onTouchEnd
07:14 - Setting a timer using setTimeout to detect a long press
08:31 - Using React refs with useRef hook to cancel timer when not a long press
10:57 - Preventing onClick handler from firing with a ref to store long press indicator
13:43 - Creating a custom hook to use long press detection on multiple buttons
18:47 - Triggering custom functions in a custom hook with an onClick argument
20:56 - Outro
Demo Starter
https://github.com/colbyfayock/demo-l...
💾 Code
https://github.com/colbyfayock/my-lon...
🗒️ Read More
https://spacejelly.dev/posts/how-to-d...
🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]
👨🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses
🧰 More Resources
Demo Starter
https://github.com/colbyfayock/demo-l...
React SyntheticEvent
https://reactjs.org/docs/events.html
🎼 Music
Music from Uppbeat (free for Creators!):
http://uppbeat.io/t/hybridas/changes
License code: BG5NVE0WROUHS5ZF
#colbyfayock #reactjs #javascript #javascripttutorial #webdevelopment
Watch video Detecting Long Press Gestures with JavaScript Events in React plus Custom React Hook online without registration, duration hours minute second in high quality. This video was added by user Colby Fayock 08 April 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 5,467 once and liked it 138 people.