React Flex Masonry Grid

A fast and lightweight React Component to display a list of objects in a custom component. The grid layout uses the css flexbox feature. In contrast to well-known masonry layouts there is no absolute positioning which makes it faster. The offsets are set with CSS transform style (translateY). The grid responds immediately to browser window resizes and content changes due to the usage of ResizeObserver. The item width is set with the CSS attribute flex-basis and can be customized via props. That means that the item width is nearly the same size on all devices and there is no need to configure media queries.

• Fully responsive
• No dependencies
• Easy customization without having to touch CSS

Features

• props are passed through to your custom component
• grid reacts to deleted items
• grid reacts to Risizing and height changes due to the usage of ResizeObserver

Installation

As npm package

npm install @offensichtbar-codestock/react-flex-masonry-grid --save

Usage

Import MasonryGrid into your React component:

import { MasonryGrid } from '@offensichtbar-codestock/react-flex-masonry-grid';

Pass an array of objects you want to render as props to the Component (mandatory props). Wrapped inside the Component will be your custom component. For each item in the items array the custom component will be rendered inside a list element created by the MasonryGrid component:

<MasonryGrid items={items}>
    <YourCustomComponent/>
</MasonryGrid>

Configuration

Additional props

• additional
• id
• config

The custom component accepts optional additional props, called "additional". The props aren't passed to the custom component inside the MasonryGridComponent:

<MasonryGrid 
    id="customId"
    items={items}
    additional={additional}
    config={config}>
    <YourCustomComponent/>
</MasonryGrid>

The custom component may look like this:

const YourCustomComponent = ({item, additional}) => {

    return (<div>
        <h3>{item.title}</h3>
        <p>{item.text}</p>
        <button onClick={ () => additional.deleteItem(item) }>Delete Item</button>
    </div>)
}

Config Options

A config object for the CSS properties 'padding' and 'flex-basis' can be passed as props to the MasonryGrid component:

const config = {
    gap: '10px',
    flexbasis: '200px'
}

Alternatively, these properties can be set by overwriting the default setting in CSS:

ul.gridContainer li.gridItem {
    padding: '10px',
    flex-basis: 15rem;
}

default values

padding: .5rem;
flex-basis: 15rem;

Demo

Live demo
Stackblitz editor

Licence