react masonry grid

This helpful little package allows you to easily render masonry(space-efficient) grids using react.

What is a masonry grid?

_{Have a look :D}

Demo:

Clone this repo and run the following:

npm install

To see the demo for images in the grid:

npm run demo:images

To see the demo for textual content:

npm run demo:text

Installation

This package is available as a npm module. To install it:

npm install react-masonry-grid

Usage

Use it in your app

 
const images = [
    'https://media0.giphy.com/media/i67uIY4a61ejm/giphy_s.gif?cid=5426f43fd0ed6f56dd3a69975ff92370ee725f8e98ab9028&rid=giphy_s.gif',
    'https://media1.giphy.com/media/Z5W9H5DtCWN4k/giphy_s.gif?cid=5426f43fd0ed6f56dd3a69975ff92370ee725f8e98ab9028&rid=giphy_s.gif',
    'https://media3.giphy.com/media/443jTSLWYgLJQysB1z/giphy_s.gif?cid=5426f43fd0ed6f56dd3a69975ff92370ee725f8e98ab9028&rid=giphy_s.gif',
    'https://media3.giphy.com/media/SVqgwI1EIrjLfZyyfD/giphy_s.gif?cid=5426f43fd0ed6f56dd3a69975ff92370ee725f8e98ab9028&rid=giphy_s.gif',
    'https://media0.giphy.com/media/iCiyEytDbvR62GFfbb/giphy_s.gif?cid=5426f43fd0ed6f56dd3a69975ff92370ee725f8e98ab9028&rid=giphy_s.gif'
]
 
<Grid gutter={10} columnWidth={200} rowHeight={10}>
    {images.map((image) => (
        <GridItem>
            <img src={image} style={{width: '100%' }}/>
        </GridItem>
    ))}
</Grid>

Props

The Grid component takes the following props:

• gutter: The gap, in px, between each row and each column of the grid
• columnWidth: The width, in px, of each individual column
• rowHeight: The height, in px, of each row. Note: Each GridItem may span multiple rows. rowHeight is the minimum height of one such row.

The GridItem component takes no props but is needed to be used as it watches its children and recalculates it's height whenever the children load.