Browser Event Listeners in React for Search and Autocomplete
Learn how to manage and listen to browser event listeners in a React app. We'll walk through spinning up a Next.js app and working with a search autocomplete example to focus on the input on page load and navigate results with a keyboard.
Jamstack X Ecommerce Course Updates
https://colbyfayock.com/ecomm
🧐 What's inside?
00:00 - Intro to Browser Events in JavaScript
00:10 - What are browser events and dealing with them in React
00:57 - Starting a new project from a Next.js SWAPI search demo
02:32 - Reviewing demo project before diving in
03:45 - Using refs and the useEffect hook to focus on an input on page load
06:37 - Listening to keyboard events to trigger code
09:41 - Navigating autocomplete results using keyboard events
17:43 - Outro
🗒️ Read More
https://spacejelly.dev/posts/how-to-u...
🔔 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/what-i-use
🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/zayner/falling
License code: GMFVUS2JCPFIQZLO
#colbyfayock #reactjs #browserevent #nextjs #search #webdevelopment
Watch video Browser Event Listeners in React for Search and Autocomplete online, duration hours minute second in high quality that is uploaded to the channel Colby Fayock 14 July 2021. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 4,579 times and liked it 172 visitors.
