react-masonry-list
TypeScript icon, indicating that this package has built-in type declarations

1.0.6 • Public • Published

React Masonry List

npm License: MIT

A Masonry component implemented through css grid, fast and responsive. :star2: Each element first fills the column with the largest remaining space in the vertical direction, which will ensure that the height difference of each column is minimal.

👉 demo page

Install

npm install react-masonry-list --save

Or use yarn yarn add react-masonry-list

Usage

import Layout from 'react-masonry-list';

const items = [
  //...
];

// If item contains img elements, don't forget set img's width. In order to get a better display effect, you can also set img's `object-fit` to `contain`.

const List = () => {
  return (
    <Layout
      minWidth={100}
      items={items.map((item) => (
        <div key={item.id}>...</div>
      ))}
    ></Layout>
  );
};

Use with NextJS

Because it's a client side only component, when using it with NextJS, you need to import it by dynamic API:

import dynamic from 'next/dynamic';

const Layout = dynamic(() => import('react-masonry-list'), {
  ssr: false,
});

const items = [
  //...
];

// If item contains img elements, don't forget set img's width. In order to get a better display effect, you can also set img's `object-fit` to `contain`.

const List = () => {
  return (
    <Layout
      minWidth={100}
      items={items.map((item) => (
        <div key={item.id}>...</div>
      ))}
    ></Layout>
  );
};

Props

name type required default description
items react node array No [] The items you want to render
colCount number No 3 Column count
gap number No 10 The size(px) of the gap between elements
minWidth number No 300 The min width(px) of columns
className string No \ Custom class name of layout container

Browser compatibility

Refer to https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#browser_compatibility

Package Sidebar

Install

npm i react-masonry-list

Weekly Downloads

725

Version

1.0.6

License

MIT

Unpacked Size

54.7 kB

Total Files

12

Last publish

Collaborators

  • margaux