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.
Replicating the issue
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.
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.
Unfortunately, keyboards will scroll this current page up/down thus you’d have to open the editor in new window….
Wrap the list with a container element
First you need to wrap the list within a container element such as
Add references to the list
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.
innerRef, you refer to it as
innerRef improves readability.
Handling onKeyDown event
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
pageUphas keyCode value of 33
pageDownhas keyCode value of 34
endhas keyCode value of 36
homehas keyCode value of 35
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
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?
And let’s rock and scroll~
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.)
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’d appreciate it if anyone can provide me with feedbacks for questions I’ve asked above 🙂