React-lazy-grid NPM

react-lazy-grid

react-lazy-grid is a React component that dynamically renders only the visible portion of a grid based on the scroll position. It is used to efficiently display large grids.

Installation

npm install react-lazy-grid

yarn add react-lazy-grid

Usage

import React from "react";
import LazyGrid from "react-lazy-grid";

const MyComponent = (props) => {
  return <div>{props.content}</div>;
};

const App = () => {
  const grid = [
    [{ content: "Item 1" }, { content: "Item 2" }],
    [{ content: "Item 3" }, { content: "Item 4" }],
  ];

  return (
    <LazyGrid
      grid={grid}
      Component={MyComponent}
      width="500px"
      height="500px"
      itemWidth={100}
      itemHeight={100}
      transpose={false}
    />
  );
};

export default App;

Props

LazyGridProps

Name	Type	Description
`grid`	`any[][] \| any[]`	A 2D or 1D array where each element is a property object passed to the component.
`Component`	`React.FC<any>`	The component displayed in each grid cell.
`width`	`string`	The width of the entire grid.
`height`	`string`	The height of the entire grid.
`itemWidth`	`number`	The width of each grid cell.
`itemHeight`	`number`	The height of each grid cell.
`buffer`	`number`	Optional. The number of extra rows and columns to render outside the visible area.
`transpose`	`boolean`	Optional. If true, transposes the grid (switches rows and columns).

License

MIT

react lazy grid list nextjs ui-component

1.0.0

4 months ago