Photo by Ruthie_ on _Unsplash

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.

What happened?

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.

Implementation

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....

Wrap the list with a container element

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.

https://gist.github.com/dance2die/6a7e17fd60f77e2ba47ba4bb7fa599a5

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.

https://gist.github.com/dance2die/831038fd5f895b0685fcce7fd8bf3bd0

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.

Handling onKeyDown event

Let's add the onKeyDown event handler, which is fired whenever you hold down any keys.

https://gist.github.com/dance2die/a1306474efb3c85e0b4f129084442b2d

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

• pageUp has keyCode value of 33
• pageDown has keyCode value of 34
• end has keyCode value of 36
• home has keyCode value of 35

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?

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.)

Scrolling mutating the DOM

Refer to Kent C. Dodds' post useEffect vs useLayoutEffect for difference between them.

https://gist.github.com/dance2die/f4ec9b5c449e63deccdf42973d27942d

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 🙏

Roulette?

Result

Now you can scroll using Page Up/Down, Home, and End keys.

Here is the link to the code again on CodeSandbox.

Additional Context

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 🙂