Determining visible item count

[cmlenz]

Hey all!

I have a virtualized vertical list, and I would like to implement keyboard navigation to move the selection in the list up/down a "page" at a time, using the page-up & page-down keys). So what I would like to do is move the selection from the currently selected item N items forward, where N depends on the number of items actually visible in the list.

I can use the length of the virtualItems list, but then I would need to subtract the overscan, and take into account whether the window is at the start or the end of the list.

Is there a better way to determine the number of items currently visible in the list?

Thanks!

[piecyk]

Hi, yes. You can read visible range start/end via rangeExtractor, something like

import { useVirtual, defaultRangeExtractor } from 'react-virtual'

function App() {
  const parentRef = React.useRef(null)
  const rangeRef = React.useRef({ start: 0, end: 0 })

  const rowVirtualizer = useVirtual({
    size: 1000,
    parentRef,
    rangeExtractor: React.useCallback(range => {
      rangeRef.current = range

      return defaultRangeExtractor(range)
    }, []),
  })
  
  // ...
}

[cmlenz]

Perfect, that does the trick. Thanks!

[garabedium]

@cmlenz Were you able to get this working? Were you able to move the list via a keyboard event?