react-responsive-masonry

    2.1.3 • Public • Published

    react-responsive-masonry

    npm package Travis Codecov Module formats

    A lightweight React responsive masonry component built with css flexbox.

    Getting started

    react-responsive-masonry

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

    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

    Install

    npm i react-responsive-masonry

    DownloadsWeekly Downloads

    6,513

    Version

    2.1.3

    License

    MIT

    Unpacked Size

    55.9 kB

    Total Files

    13

    Last publish

    Collaborators

    • cedricdelpoux