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: hello@colbyfayock.com

👨‍🚀 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