tn-react-virtualgrid
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.5 • Public • Published

    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>
    )

    Install

    npm i tn-react-virtualgrid

    DownloadsWeekly Downloads

    25

    Version

    4.0.5

    License

    MIT

    Unpacked Size

    57.4 kB

    Total Files

    41

    Last publish

    Collaborators

    • avatar