https://github.com/sibiraj-s/react-layout-masonry
Responsive masonry layout for React
https://github.com/sibiraj-s/react-layout-masonry
react react-layout react-masonry
Last synced: about 1 month ago
JSON representation
Responsive masonry layout for React
- Host: GitHub
- URL: https://github.com/sibiraj-s/react-layout-masonry
- Owner: sibiraj-s
- License: mit
- Created: 2023-08-16T11:15:15.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-19T10:01:12.000Z (about 2 months ago)
- Last Synced: 2025-04-09T21:16:56.086Z (about 1 month ago)
- Topics: react, react-layout, react-masonry
- Language: TypeScript
- Homepage: https://sibiraj-s.github.io/react-layout-masonry/
- Size: 2.7 MB
- Stars: 42
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Layout Masonry
> React Layout Masonry is a flexible and customizable React component for creating dynamic and fixed/responsive masonry
> layouts.
[](https://github.com/sibiraj-s/react-layout-masonry/actions/workflows/tests.yml)
[](https://www.npmjs.com/package/react-layout-masonry)
## 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
### Fixed Columns Layout
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 (
{items.map((item) => {
return ;
})}
);
};
export default FixedColumnsMasonry;
```
### Responsive Columns Layout
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 (
{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`.
### Column Props
The `columnProps` prop allows you to apply additional props to the container of each column. Here's an example:
```jsx
{/* ... */}
```
## 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](docs/src/components/) directory in this repository.
## Contributing
If you encounter any issues or have questions, please [open an issue](https://github.com/sibiraj-s/react-layout-masonry/issues)
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](LICENSE).