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

import { Grid } from 'mauerwerk'

<Grid
  // Arbitrary data, should contain keys, possibly heights, etc.
  data={this.state.data}
  // 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)
  columns={3}
  // Optional: space between elements
  margin={0}
  // Optional: removes the possibility to scroll away from a maximized element
  lockScroll={false}
  // Optional: delay before minimizing an opened element
  closeDelay={500}
  // Optional: animates the grid in if true (default)
  transitionMount={true}>
  {(data, open, toggle) => (
    <div>
      {data.title}
      {open && <div>Opened/maximized content here</div>}
      <button onClick={toggle}>{open ? 'Close' : 'Open'}</button>
    </div>
  )}
</Grid>

import { Grid, Slug, Fade } from 'mauerwerk'

<Grid {...props}>
  {(data, open, toggle) => (
    <div>
      <Fade show={open}>
        <Slug>
          <h1>Opened content</h1>
          <span>Some text</span>
          <button onClick={toggle}>Close</button>
        </Slug>
      </Fade>
      <Fade show={!open}>
        <Slug>
          <h1>Cell content</h1>
          <span>Some text</span>
          <button onClick={toggle}>Open</button>
        </Slug>
      </Fade>
      <div>Content that would apply to both open and closed state</div>
    </div>
  )}
</Grid>