React Masonry List
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.
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