atsol-masonry-react

A lightweight React responsive masonry component.

Installaton

npm i atsol-masonry-react

yarn add atsol-masonry-react

Usage example

import { Masonry, MasonryGrid } from "atsol-masonry-react"

const images = [] // Your images array

function App() {
    return (
        <MasonryGrid>
            <Masonry columnsCount={3} gutter={16} className={"waterfall"}>
                {images.map((i, idx) => {
                    return (
                        <img
                            src={i.url}
                            alt="test"
                            key={idx}
                            style={{ minWidth: "100%" }}
                        />
                    );
                })}
            </Masonry>
        </MasonryGrid>
    )
}

Docs

MasonryGrid Default values for breakpoints can be customized throught props

<MasonryGrid columnsBreakpoints={{ 320: 1, 576: 2, 768: 3, 992: 3 }} >

following props for MasonryGrid are available

• columnsBreakpoints
• style

Masonry following props for MasonryGrid are available

• columnsCount
• gutter
• className
• style

note gutter width is set in pixels