React virtual list component that supports elements of any size.
npm install react-dynamic-virtual-list
npm i react-dynamic-virtual-list
`
Using in Typescript/Babel project:
`js
import { DVL } from "react-dynamic-virtual-list";
`
Using in Node:
`js
const DVL = require("react-dynamic-virtual-list").DVL;
`
To use directly in the browser, drop the tag below into your .
`html
`
Quick Start
`tsx
import { DVL } from "react-dynamic-virtual-list";
import * as React from "react";
class App extends React.Component {
render() {
return onRender={item => {item.name}}
items={[{name: "Billy"}, {name: "Joel"}]}
windowContainer={true}
/>
}
}
`
API
The Dynamic Virtual List will render your items 100 at a time onto the dom and measure their height using .clientHeight, then use that cached value to render the actual virtual list. The virtual list will grow in size appropriately as it completes measuring each block.
Callbacks can be used to hide the element while it's doing this, or the behavior can be avoided entirely by passing different values into the calculateHeight prop.
Grid layouts are supported provided each element is a fixed width.
Props
\* Required
$3
Function to use to render each element, must return a JSX Element. If using a grid layout make sure you set fixed widths to your elements. DO NOT use margins, if you need spacing between the elements create an inner element that contains the actual content, creating the margins with an outer div.
If using grid layout, the number of columns currently being displayed is passed into this prop as well. Keep in mind the initial render won't provide a columns argument so even with a grid layout you should set up your render prop to handle undefined column values.
$3
Array of items to render into the list.
$3
If this prop is unused, the library will render every element onto the page to discover it's height with .clientHeight, then display it in the virtual list, 100 items at a time. You can change this behavior completely by either passing in a function to use for calculating heights or a number that will be used as a fixed height for all elements.
Passing in a fixed number is by far the most performant option while the function is a good second choice.
IMPORTANT! The library makes zero attempts to resolve height conflicts. If you give a fixed height to the calculateHeight prop and the elements aren't actually fixed to that height, you're gonna have a bad time.
$3
Pass "true" to use the window as the scroll container.
$3
Default is 5, number of rows to render below and above the visual area.
$3
The ref of the container DIV generated by the library to contain the inner container div and it's list.
$3
Pass through styles to the container DIV. If you aren't using the window as a container then set a fixed height and overflowY: "scroll" here.
$3
Pass through classes to the container DIV.
$3
Pass through styles to the inner container DIV. This div holds the list of rendered elements. If you plan to do Flexbox this is the place to put your styles. paddingTop and height styles will be ignored/overwritten.
$3
Pass through classes to the inner container DIV that holds the list elements.
$3
By default the library attaches the method to calculate the visible space to the scroll event and renders onRequestAnimationFrame. You can disable and override this behavior by using this prop, the only argument is the method that calculates what should be visible on the screen. You can even pass in manually generated height and scrollTop values into the method. When you use this prop the library will only update it's visible area when the provided function is called or on window resize.
If no scrollTop or containerHeight` arguments are passed in the library will fall back to it's default behavior, using the window or container to measure what should show up.