react-responsive-masonry

[![npm package][npm-badge]][npm] [![Travis][build-badge]][build]
[![Codecov][codecov-badge]][codecov] ![Module formats][module-formats]

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

``shell
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

`html
https://unpkg.com/react-responsive-masonry/umd/react-responsive-masonry.js
`

Demo

See [Demo page][github-page]

Example

!React-responsive-masonry gif

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.

`js
import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"

// The number of columns and the gutter change by resizing the window
class MyWrapper extends React.Component {
render() {
return (
columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
gutterBreakpoints={{350: "12px", 750: "16px", 900: "24px"}}
>



{/ Children /}




)
}
}

// The number of columns and the gutter don't change by resizing the window
class MyWrapper extends Component {
render() {
return (



{/ Children /}



)
}
}
`

Props

$3

| Name | PropType | Description | Default |
| ------------ | -------- | ------------------------------------------------------ | ------- |
| columnsCount | Number | Injected by ResponsiveMasonry | 3 |
| gutter | String | Margin surrounding each item e.g. "10px" or "1.5rem" | "0" |
| containerTag | String | Tag name of the container element | "div" |
| itemTag | String | Tag name of the item element | "div" |
| itemStyle | Object | Style object applied to each item | {} |
| sequential | Boolean | If true, items are placed in the order they are passed | false |

$3

| Name | PropType | Description | Default |
| ----------------------- | -------- | ---------------------------------------------------------------------------------------- | ------------------------ |
| columnsCountBreakPoints | Object | Keys are breakpoints in px, values are the columns number | {350: 1, 750: 2, 900: 3} |
| gutterBreakpoints | Object | Keys are breakpoints in px, values are the gutter value in any valid CSS value for 'gap' | |

Contributing

- ⇄ Pull/Merge requests and ★ Stars are always welcome.
- For bugs and feature requests, please [create an issue][github-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

[npm-badge]: https://img.shields.io/npm/v/react-responsive-masonry.svg?style=flat-square
[npm]: https://www.npmjs.org/package/react-responsive-masonry
[build-badge]: https://img.shields.io/travis/cedricdelpoux/react-responsive-masonry/master.svg?style=flat-square
[build]: https://travis-ci.org/cedricdelpoux/react-responsive-masonry
[codecov-badge]: https://img.shields.io/codecov/c/github/cedricdelpoux/react-responsive-masonry.svg?style=flat-square
[codecov]: https://codecov.io/gh/cedricdelpoux/react-responsive-masonry
[module-formats]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square
[github-page]: https://cedricdelpoux.github.io/react-responsive-masonry
[github-issue]: https://github.com/cedricdelpoux/react-responsive-masonry/issues/new