API Reference
React
useGrid

useGrid

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,
    size: 120
    // ...
  });
 
  // ...
};

Configurations

OptionTypeRequiredDescription
scrollRefRefObject<Element>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
Only applies when horizontal is true
widthnumberNoWidth 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 area is placed on the x-axis
getItemIdfunctionNoCallback for grid item id
getItemDatafunctionNoCallback for grid item data
rowVirtualizerVirtualizerOptionsNoRow virtualizer options
columnVirtualizerVirtualizerOptionsNoColumn virtualizer options
onLoadMorefunctionNoRenders an area which triggers the callback when scrolled into view
loadMoreSizenumberNoSet the size of the load more area