CODEWITHSUNDEEP
javascriptreactjs
LukeVenter
LukeVenter

Reputation: 509

How to navigate with arrows in a multi-line list in React

I have a list of images varying in length, and I want to display them in two rows like the image below is showing.

I can do this using flex-wrap or similar.

The trick is that I need to navigate with the arrows in an intuitive way. Going left to right is easy because I would just look for the next item in the list and set it to active while listening for the arrow keys to be pressed.

Where I'm stuck though, is vertical navigation. How would I handle it if I wanted to press the down arrow and go from block 3 to block 8? (Keep in mind that the length of this list is variable and won't always be an even number.

Any help would be appreciated.

enter image description here

Upvotes: 0

Views: 406

Answers (1)

niorad
niorad

Reputation: 1370

Find the next element with the same X-coordinate as the currently active.

Let's say you're on 3, you press "DOWN", then you iterate through each next sibling, and focus the first one that lies on the same X-coordinate, which is 8 in your example.

This should work as long as the items are aligned in a grid.

Upvotes: 1

Related Questions