Let's build a Spatial Navigation library
summary
Builds a small Spatial Navigation library for TV UIs using React and react-router, registering interactive nodes, listening to document keydown events and using element.getBoundingClientRect to pick the nearest target. Implements a navigation engine class with register/unregister and subscriber callbacks, a hook returning a ref and focus boolean, and a circular navigation feature via navigational containers and ancestor IDs. Demo works end to end, notes performance overhead about ~9 ms to optimize.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 2:26Why build a library
- 6:20First approach limitations
- 8:30Registering navigational nodes
- 11:57Handling TV control events
- 13:23Selecting next focus node
- 15:52Making focus visible
- 17:37Circular navigation concept
- 19:45Implementing circular navigation
- 24:38Handling complex layouts
- 25:21Performance considerations
- 25:43Closing and resources
related talks
45mMobile navigation
05mLightning talk from Eric Vlad Vicenti
32mNavigating React Native Navigation
22mMaximally Modular Apps with React Navigation
23mImproving developer and user experience with nested layouts in Next.js
23mAccessible navigation in single-page applications
49mNavigation Component, feedback from the trench
38mAdventures in Navigation