Background
I am new to react (and shorten) and want to write webapp where the interaction takes place only with the keyboard / remote events (arrow keys instead of a mouse or touch), similar to what netflix does in its built-in TV applications.
I have a rough idea of how to structure such an application, but I'm not sure if there is a more elegant way to do this in ReactJS.
Idea for controlling the interaction with the arrow inside the component matrix
My idea is to provide the component with some kind of focused state inside the container:
- There is only one focused component
- focused component receives all keyboard events sent to it by the container
- can use the keyboard event before it reaches the focused component.
- the container itself is activated by routing the container
- handles focused states for its child components.
- the focused component notifies it of the parent container if it reaches the edge (for example, press DOWN when in the list along the x axis) with which the container can decide what should happen next (for example, another component is focused)
Example
Let there be a component of a full-screen container called MyLibrary. It includes 2 components:
- Left navigation
ListView data for active navigation on the right
|-----------------------|
| Nav | List |
| -n1 | 1. Miles |
| -n2 | 2. Bill |
| -n3 | 3. Lester |
| | 4. Herbie |
| | 5. McCoy |
|_______________________|
MyLibrary focuses the navigation component on mount, so UP / DOWN / LEFT / RIGHT is passed through MyLibrary to Navigation.
DOWN was pressed, so Navigation updates its own selected record state.
RIGHT, Navigation , MyLibrary , - .
MyLibrary , Navigation RIGHT ListView.
, ListView . ListView.