React-responsive-masonry NPM

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

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.

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>
        )
    }
}