Overview

React Virtual is a single headless React hook that is exported as a utility to help you build virtualizers. It is not a component and does not render any markup or styles for you. At a bare minimum, it requires a size, a parent element ref to get the job done.

React Virtual virtualizers do not have an orientation, which makes it possible to use the same hook for both vertical and horizontal virtualizers.

Here is just a quick example of what it looks like to use React Virtual.

1 function RowVirtualizerFixed() {
2   const parentRef = React.useRef()
3 
4   const rowVirtualizer = useVirtual({
5     size: 10000,
6     parentRef,
7     estimateSize: React.useCallback(() => 35, []),
8   })
9 
10   return (
11     <>
12       <div
13         ref={parentRef}
14         className="List"
15         style={{
16           height: `150px`,
17           width: `300px`,
18           overflow: 'auto',
19         }}
20       >
21         <div
22           className="ListInner"
23           style={{
24             height: `${rowVirtualizer.totalSize}px`,
25             width: '100%',
26             position: 'relative',
27           }}
28         >
29           {rowVirtualizer.virtualItems.map(virtualRow => (
30             <div
31               key={virtualRow.index}
32               className={virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'}
33               style={{
34                 position: 'absolute',
35                 top: 0,
36                 left: 0,
37                 width: '100%',
38                 height: `${virtualRow.size}px`,
39                 transform: `translateY(${virtualRow.start}px)`,
40               }}
41             >
42               Row {virtualRow.index}
43             </div>
44           ))}
45         </div>
46       </div>
47     </>
48   )
49 }

Keep moving to dive deeper and see more!