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-long-press-starter 💾 Code https://github.com/colbyfayock/my-long-press 🗒️ Read More https://spacejelly.dev/posts/how-to-detect-long-press-gestures-in-javascript-events-in-react 🔔 Subscribe for more tech and developer videos https://www.youtube.com/colbyfayock?sub_confirmation=1 🐦 Get updates straight to your Twitter @colbyfayock https://twitter.com/colbyfayock 📸 Catch the next stream live on Twitch @colbyfayock https://twitch.tv/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-long-press-starter 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