react-key-navigation
Spatial navigation components for React, inspired by BBC TAL's focus management system.
Overview
React Key Navigation provides spatial navigation components for React applications, enabling intuitive keyboard-based navigation similar to TV interfaces and gaming consoles. It helps developers create accessible applications that can be navigated without a mouse, particularly useful for TV apps, game UIs, and accessibility-focused web applications.
Key Features
- Focusable Component — Wraps elements to make them navigable with keyboard events like onFocus, onBlur, and onEnterDown
- Grid Navigation — Enables two-dimensional navigation through grid layouts with customizable rows and columns
- Horizontal List — Provides left/right keyboard navigation for horizontal item lists
- Vertical List — Enables up/down keyboard navigation for vertical item lists
- Spatial Navigation — Moves focus based on spatial relationships between elements rather than DOM order
Philosophy
React Key Navigation follows the BBC TAL approach to focus management, prioritizing predictable spatial navigation patterns that work well for non-pointer devices and accessibility scenarios.
Related Projects
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
