react-responsive-masonry
A lightweight React responsive masonry component built with css flexbox.
Getting started
You can download react-responsive-masonry
from the NPM registry via the npm
or
yarn
commands
yarn add react-responsive-masonry
npm install react-responsive-masonry --save
If you don't use package manager and you want to include react-responsive-masonry
directly in your html, you could get it from the UNPKG CDN
https://unpkg.com/react-responsive-masonry/umd/react-responsive-masonry.js
Demo
See Demo page
Example
Usage
If you want the number of columns change by resizing the window, you need to wrap the Masonry
component by the ResponsiveMasonry
component.
Otherwise, you only need to use the Masonry
component.
import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"
class MyWrapper extends React.Component {
render() {
return (
<ResponsiveMasonry
columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
>
<Masonry>
<ChildA />
<ChildB />
{/* Children */}
<ChildY />
<ChildZ />
</Masonry>
</ResponsiveMasonry>
)
}
}
class MyWrapper extends Component {
render() {
return (
<Masonry columnsCount={3}>
<ChildA />
<ChildB />
{/* Children */}
<ChildY />
<ChildZ />
</Masonry>
)
}
}
Props
Mansonry component
Name | PropType | Description | Default |
---|
columnsCount | Number | Injected by ResponsiveMasonry | 3 |
gutter | String | Margin surrounding each item | "0" |
ResponsiveMasonry component
Name | PropType | Description | Default |
---|
columnsCountBreakPoints | Object | Keys are breakpoints in px, values are the columns number | {350: 1, 750: 2, 900: 3} |
Contributing
- ⇄ Pull/Merge requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests (
npm test
).
See CONTRIBUTING.md guidelines
Changelog
See changelog
License
This project is licensed under the MIT License - see the
LICENCE.md file for details