⚒ A react-spring driven masonry-like grid with enter/exit and shared element transitions

Build Status npm version

npm install mauerwerk


Simplified Demo:

How to use

import { Grid } from 'mauerwerk'

  // Arbitrary data, should contain keys, possibly heights, etc.
  // Key accessor, instructs grid on how to fetch individual keys from the data set
  keys={d => d.key}
  // Can be a fixed value or an individual data accessor (for variable heights)
  // If you leave it undefined it will assume 100% container height
  heights={d => d.height}
  // Optional: number of columns (make it responsive yourself using react-measure/react-media)
  // Optional: space between elements
  // Optional: removes the possibility to scroll away from a maximized element
  // Optional: delay before minimizing an opened element
  // Optional: animates the grid in if true (default)
  {(data, open, toggle) => (
      {open && <div>Opened/maximized content here</div>}
      <button onClick={toggle}>{open ? 'Close' : 'Open'}</button>

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.