React Layout Masonry

React Layout Masonry is a flexible and customizable React component for creating dynamic and fixed/responsive masonry layouts.

Installation

You can install React Layout Masonry using npm, pnpm or yarn:

1npm install react-layout-masonry

or

1pnpm install react-layout-masonry

or

1yarn add react-layout-masonry

Usage

Fixed Columns Layout

Here's an example of how to use React Layout Masonry with a fixed number of columns in your React application:

1import Masonry from 'react-layout-masonry';
2
3const FixedColumnsMasonry = () => {
4  return (
5    <Masonry
6      columns={3}
7      gap={16}
8    >
9      {items.map((item) => {
10        return <Item {...item} />;
11      })}
12    </Masonry>
13  );
14};
15
16export default FixedColumnsMasonry;

Responsive Columns Layout

Here's an example of how to use React Layout Masonry with responsive columns in your React application:

1import Masonry from 'react-layout-masonry';
2
3const ResponsiveColumnsMasonry = () => {
4  return (
5    <Masonry
6      columns={{ 640: 1, 768: 2, 1024: 3, 1280: 5 }}
7      gap={16}
8    >
9      {items.map((item) => {
10        return <Item {...item} />;
11      })}
12    </Masonry>
13  );
14};
15
16export default ResponsiveColumnsMasonry;

or use the array syntax

1<Masonry columns={[1, undefined, undefined, 3]} />

this will be converted to

1{
2  "640": 1,
3  "1280": 3
4}

The array's order corresponds to the default breakpoints, which are 640, 786, 1024, 1280, 1536.

Column Props

The columnProps prop allows you to apply additional props to the container of each column. Here's an example:

1<Masonry
2  columns={3}
3  gap={16}
4  columnProps={{
5    className: 'custom-column',
6    style: { backgroundColor: 'lightgray' },
7  }}
8>
9  {/* ... */}
10</Masonry>

Props

• columns (number or object, required): The number of columns in the masonry layout, or an object with breakpoints and corresponding column counts.
• gap (number, optional): The spacing between columns and rows in pixels. Defaults to 0.
• columnProps (object, optional): Additional props to be applied to each column, such as className for styling.

Examples

For examples, usage and customization options, please refer to the docs directory in this repository.

Contributing

If you encounter any issues or have questions, please open an issue on our GitHub repository. Make sure to create an issue or discussion first before raising a PR

License

React Layout Masonry is open-source software licensed under the MIT License.