react-responsive-masonry
!npm packagenpm-badgenpm !Travisbuild-badgebuild
!Codecovcodecov-badgecodecov !Module formatsmodule-formatsA 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
commandsyarn 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 CDNhttps://unpkg.com/react-responsive-masonry/umd/react-responsive-masonry.js
Demo
See Demo pagegithub-pageExample
Usage
If you want the number of columns change by resizing the window, you need to wrap theMasonry
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"
// The number of columns change by resizing the window
class MyWrapper extends React.Component {
render() {
return (
<ResponsiveMasonry
columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
>
<Masonry>
<ChildA />
<ChildB />
{/* Children */}
<ChildY />
<ChildZ />
</Masonry>
</ResponsiveMasonry>
)
}
}
// The number of columns don't change by resizing the window
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 e.g. "10px" or "1.5rem" | "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 issuegithub-issue.
- Pull requests must be accompanied by passing automated tests (
npm test
).
See CONTRIBUTING.md guidelines