Example.handleKeyDown.md

const Example = () => {
  const outerListRef = useRef(undefined)
  const innerListRef = useRef(undefined)
+  const [scrollOffset, setScrollOffset] = useState(0)
+  const listHeight = 150

+  const [pageUp, pageDown, home, end] = [33, 34, 36, 35]
   // The magic number "5" is an arbitrary value from trial & error...
+  const pageOffset = listHeight * 5
+  const maxHeight =
+    (innerListRef.current &&
+      innerListRef.current.style.height.replace('px', '')) ||
+    listHeight

+  const minHeight = 0.1

+  const keys = {
+    [pageUp]: Math.max(minHeight, scrollOffset - pageOffset),
+    [pageDown]: Math.min(scrollOffset + pageOffset, maxHeight),
+    [end]: maxHeight,
+    [home]: minHeight,
+  }

+  const handleKeyDown = ({ keyCode }) => {
+    keys[keyCode] && setScrollOffset(keys[keyCode])
+  }

  return (
    <div onKeyDown={handleKeyDown} tabIndex="0" style={{ width: '151px' }}>
      <List
        outerRef={outerListRef}
        innerRef={innerListRef}
        className="List"
        height={listHeight}
        itemCount={1000}
        itemSize={35}
        useIsScrolling
        width={300}
      >
        {Row}
      </List>
    </div>
  )
}