Scrolling with Page Up/Down Keys in React-Window
React-Window is a React library by Brian Vaughn for rendering a massive amount of items in a list (or a grid but I will use "list" to keep the sentences simple as principle is the same for both) efficiently.
By rendering only visible items
But the problem is that when you click on an item in a list, you can't scroll up/down using keys.
such as Page Up/Down, Arrow Up/Down, Home, or End keys.
Let's see how we can support scrolling in react-window with Page Up/Down.
Go to an (any example) react-window example and scroll up/down with keyboard without selecting an item in the list.
You should be able to scroll with any keys.
And then click on any item in the list and try to scroll with keyboard.
And you will see that it will move just once and stop responding.
The behavior isn't implemented according to this GitHub issue, Support scrolling with Page Up / Page Down keys (, which is NOT created by me but by Steve Randy Tantra).
And you are responsible to add a support for yourself.
Thankfully, Brian has provided a way to implement it in the same thread.
Let's Make that example list scrollable with Page Up/Down, Home and End keys.
You can see the working implementation here and follow along.
https://codesandbox.io/embed/5zrw4xz04x Unfortunately, keyboards will scroll this current page up/down thus you'd have to open the editor in new window....
First you need to wrap the list within a container element such as div/section/main etc.
And then add the tab index to capture the onKeyDown event.
Next, we need to refer to the list to scroll so create two (you can create one but it's more readable with two, I will show you why later) references to the List.
outerListRef is an outerRef refers to the List itself (the container property) while innerListRef is the dynamic container which updates as you scroll and contains the maximum content height.
You can refer to the documentation on inner/outerRefs but found it a bit hard to grasp without looking at the code. So let's take a look at what those two references actually refer to in rendered HTML.
The outerRef is the element we need to use scrollTo (scroll is the same)API with and the innerRef is the element we need to extract the maximum height from.
Without _innerRef_, you refer to it as _outerRef.current.firstElementChild_ so _innerRef_ improves readability.
Let's add the onKeyDown event handler, which is fired whenever you hold down any keys.
handleKeyDown is given a keyboard event with a keyCode property, which is destructured from the argument.
And when the matching key is found from the keys then we set the scroll offset (where we are currently in the list).
keys object(an essentially a map) holds a list of keys to be handled where
So whenever pageUp/Down, end, or home keys are pressed, we are updating the current position (scroll offset).
maxHeight is retrieved using the innerRef's style height for convenience without using outerRef.
minHeight is set to oddly 0.1 instead of 0. I really have no idea why setting it to 0 would not work with scroll API.
Would anyone let me know why it is so?
As react-window mutates the DOM while scrolling, we need to add it to the useLayoutEffect because we need to scrolling to happen after it.
useLayoutEffect documentation says "it fires synchronously after all DOM mutations."
Would anyone let me know if it's a good approach? (because useEffect still worked fine.)
Scrolling mutating the DOM
Refer to Kent C. Dodds' post useEffect vs useLayoutEffect for difference between them.
In the effect, we are basically calling scrollTo to update the current scroll position in the list.
When the behavior is set to smooth it was gliding, which I am not sure how to prevent from happening... 😅
Yet, again, I shameless ask why it's happening and how to get around the issue 🙏
Now you can scroll using Page Up/Down, Home, and End keys.
Here is the link to the code again on CodeSandbox.
I've had the problem implementing it for one of the pet projects and that GitHub issue and seemingly simple but yet helpful reply by Brian saved the day. So I give thanks to Steve & Brian.
I'd appreciate it if anyone can provide me with feedbacks for questions I've asked above 🙂