tn-react-virtualgrid

Bundle Size - 2.24 Kb gzipped

<VirtualGridWinscroll>

Usable when scrolling the window

const list = [...]
const handleLoadmore = () => {}
const Item = React.memo(<></>)

return (
  <VirtualGridWinscroll
    logging={true}
    breakpoints={...}
    xl={4}
    md={3}
    sm={2}
    xs={1}
    height={40}
    spacing={6}
    preload={4}
    prefetch={4}
    length={list.length}
    onLoadmore={handleLoadmore}
  >
    {({ index }) => <Item index={index}></Item>}
  </VirtualGridWinscroll>
)

<VirtualGridElmscroll>

Usable when scrolling contents inside a scrolling element

Bound Getter Method

VirtualGrid need to get the height & width of the scrolling element. If the element is not window, there are sevaral ways to calculate the height & weight of scrolling element. This option is given to use the proper method in terms of use case.

Method	UsageCase	Drawbacks
initial	When using element of a fixed size	Insensible to resize
window-resize	When element is resized with window	Only works when element size depends on window size
observe	When element size is changed in a complex manner which does not depend on window	Browser support is very limited because it uses ResizeObserver() having 91.63% coverage as of June 2021

Usage

const list = [...]
const handleLoadmore = () => {}
const Item = React.memo(<></>)
const containerRef = React.useRef<HTMLDivElement>(null)

type BoundGetterMethod = 'initial' | 'window-resize' | 'observe'
const widthGetterMethod: BoundGetterMethod = 'window-resize'
const heightGetterMethod: BoundGetterMethod = 'initial'

return (
  <div ref={containerRef} style={{ overflowY: 'scroll' }}>
    <VirtualGridElmscroll
      containerRef={containerRef}
      widthGetterMethod="initial"
      heightGetterMethod="initial"
      logging={true}
      breakpoints={...}
      xl={4}
      md={3}
      sm={2}
      xs={1}
      height={40}
      spacing={6}
      preload={4}
      prefetch={4}
      length={list.length}
      onLoadmore={handleLoadmore}
    >
      {({ index }) => <Item index={index}></Item>}
    </VirtualGridElmscroll>
  </div>
)