API Reference


import * as React from 'react';
import { useGrid } from '@virtual-grid/react';
const Page = () => {
  const ref = React.useRef<HTMLDivElement>(null);
  const grid = useGrid({
    scrollRef: ref,
    count: 1000
    // ...
  // ...


scrollRefRefObject<HTMLElement>YesReference to the scrollable element
countnumberYesNumber of items to render
totalCountnumberNoTotal number of items to render. Can be used to achieve a seamless scroll behaviour when combined with onLoadMore
sizenumber | {width: number, height: number}No / YesSize of grid items
columnsnumber | "auto"NoNumber of columns to render
rowsnumberNoNumber of rows to render
widthnumberNoWidth of the grid container
heightnumberNoHeight of the grid container
paddingnumber | {x?: number, y?: number, top?: number, bottom?: number, left?: number, right?: number}NoGrid padding
gapnumber | {x?: number, y?: number}NoGrid gap
invertbooleanNoInvert items in grid
horizontalbooleanNoHorizontal mode places items in rows from top to bottom. onLoadMore trigger is placed on the x-axis
getItemIdfunctionNoCallback for grid item id
getItemDatafunctionNoCallback for grid item data
onLoadMorefunctionNoRenders an area which triggers the callback when scrolled into view
loadMoreSizenumberNoSet the size of the load more trigger