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:

``bash
npm install react-layout-masonry
`

or

`bash
pnpm install react-layout-masonry
`

or

`bash
yarn add react-layout-masonry
`

Usage

$3

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

`jsx
import Masonry from 'react-layout-masonry';

const FixedColumnsMasonry = () => {
return (
columns={3}
gap={16}
>
{items.map((item) => {
return ;
})}

);
};

export default FixedColumnsMasonry;
`

$3

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

`jsx
import Masonry from 'react-layout-masonry';

const ResponsiveColumnsMasonry = () => {
return (
columns={{ 640: 1, 768: 2, 1024: 3, 1280: 5 }}
gap={16}
>
{items.map((item) => {
return ;
})}

);
};

export default ResponsiveColumnsMasonry;
`

or use the array syntax

`js

`

this will be converted to

`json
{
"640": 1,
"1280": 3
}
`

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

$3

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

`jsx
columns={3}
gap={16}
columnProps={{
className: 'custom-column',
style: { backgroundColor: 'lightgray' },
}}
>
{/ ... /}

`

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.