infinite-grids

Masonry layout with infinite loading.

It's a simple and easy to use library that allows you to create a masonry layout with infinite loading while controlling everything about the nodes being rendered in the layout.

Installation

npm install infinite-grids

yarn add infinite-grids

pnpm add infinite-grids

Usage

import { useState } from "react";
import { useWindowSize } from "react-use";
import { InfiniteGrids, Item } from "../lib/components/InfiniteGrids";

export const App = () => {
  const [items, setItems] = useState<Item[]>(initialItems);
  const { width } = useWindowSize();

  const loadMore = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/photos');
    const data = await response.json();
    setItems([...items, ...data]);
  };

  const numberOfColumns =
    width && width < 420
      ? 1
      : width && width > 420 && width < 768
      ? 2
      : width && width > 768 && width < 1024
      ? 3
      : 4;

  return (
    <div style={{ padding: 16 }}>
      <InfiniteGrids
        items={items}
        loadMore={loadMore}
        horizontalGap={16}
        verticalGap={16}
        renderItem={(item: Item) => (
          <div style={{ width: "100%", height: "100%" }}>
            <img
              src={item.img}
              alt=""
              style={{
                width: "100%",
                height: "100%",
                borderRadius: 12,
                overflow: "hidden",
              }}
            />
          </div>
        )}
        loader={<h4>Loading...</h4>}
        numberOfColumns={numberOfColumns}
      />
    </div>
  );
};

Note: I would recommend to use Vercel Image or Cloudinary to have on the fly transformation
and caching enabled on images to help load faster based on the container size.

Demo

Props

Property	Type	Default	Description
stories	[Object]	required	An array of objects with img and id as required fields (could have other fields as well).
loadMore ⚡️	Function	required	A function to that fires when the user scrolls to the bottom of the grids container.
hasMoreItems	Boolean	true	A boolean value to specify if there are more items to load.
horizontalGap	Number	required	Horizontal spacing between grid items.
verticalGap	Number	required	Vertical spacing between grid items.
renderItems	Function	required	Function with the item as parameter to be used to return the component to render as each grid.
loader	Component	required	Component to render when user has scrolled to the bottom and more data is being fetched.
numberOfColumns	Number	required	Specify the number of columns to be rendered for the layout (I'd recommend to keep this value dynamic as show in the example).

Development

To develop this package locally, you can follow these steps:

1. Clone the repo to your local.
2. Run pnpm install to install the dependencies.
3. Run pnpm dev to start the development server.
4. Go to localhost:5173 in your browser.

This will start a hot-reloading setup with a live example.