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

Build Status npm version

npm install mauerwerk

     

Demo: https://codesandbox.io/embed/0582jolnl

Simplified Demo: https://codesandbox.io/embed/z6ly40071p

How to use

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>

You feed mauerwerk any data-set (an array of objects most likely), give it accessors so it can access keys (which can be names, hashes, etc., the same keys you'd normally hand over to React), and either a fixed cell height or individual heights. You render out each individual cell via render-prop. You'll receive three arguments:

  1. data, the item from your data-set
  2. open, the cells state, depending on whether it is true or false you can display varying content or use further animation prototypes to transition from cell-state to maximized-state
  3. toggle, use this to maximize/minimize your cell

Effects

You probably don't want flip between open/closed content using static conditions. mauerwerk comes with two simple to use effects:

  • Fade will fade contents in according to the show property. It's a simgple wrapper around react-spring's Transition, you can feed it the same properties (config, from, enter, leave, update). By default it will just move opacity from 0 -> 1.
  • Slug lets elements "crawl" in. It's a wrapper around react-spring's Trail. By default it will move opacity from 0 -> 1 and translate y from 40px -> 0px.

These two would work outside the Grids context if you wanted to use them elsewhere.

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>

mauerwerk depends on react-spring and react-measure.

Comments

  • Controlled component
    Controlled component

    Aug 16, 2018

    Is there a way to set the 'open' element by key as a prop, so Grid can be used as a controlled, stateless component? You could use this to, say, synchronise the open state with a router system.

    <Grid
       {...props}
       openKey={1}
    />
    
    Reply
  • Update to react-spring 7
    Update to react-spring 7

    Dec 27, 2018

    Hello,

    I have tried giving it a go with react-spring 7 and the page kinda froze with some infinite loop (didn't investigate much).

    It would be super helpful if you can guide me updating the (awesome, bdw) library to work with latest react-spring.

    Reply
  • complex object generating an error
    complex object generating an error

    Jan 3, 2019

    so, at the demo we have this array:

    [
      {
        name: 'Rare Wind',
        description: '#a8edea → #fed6e3',
        css: 'linear-gradient(to top, #a8edea 0%, #fed6e3 100%)',
        height: 200
      },
      {
        name: 'Saint Petersburg',
        description: '#f5f7fa → #c3cfe2',
        css: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
        height: 400
      }
    ]
    

    and grid working fine i tried to feed it with 2x object and things falling apart.

    [
     {
        key: "0d7987d0-0f8b-11e9-b2bc-8fce1edba3a5",
        recipe: {
           directions: (4) ["Place beef roast in crock pot.", "Mix the dried mixes together in a bowl and sprinkle over the roast.", "Pour the water around the roast.", "Cook on low for 7-9 hours."],
           img: "http://img.sndimg.com/food/image/upload/w_266/v1/img/recipes/27/20/8/picVfzLZo.jpg",
           prep_time: "30min",
           recipe_yield: "8",
           title: "Crock Pot Roast",
          total_time: "3h",
          url: "http://www.food.com/recipe/to-die-for-crock-pot-roast-27208"
        }
     }
    ]
    
    

    just want to report it - in order to contribute. if this is fine - just close the issue. btw, nice work!

    Reply
  • How to make height dynamic?
    How to make height dynamic?

    May 3, 2019

    Hello, thank you for creating mauerwerk.

    I am having some trouble making modifications as I am still kind of new to react. What I am trying to do is fit image contents in the grid cells, and instead of specifying the height of each cells, I want to adapt the height to whatever contents is in the cell. If you point out where should I be looking at, I would be very grateful.

    Reply
  • Incredible
    Incredible

    Jul 12, 2019

    Just want to leave a comment to let you know I think what you built is incredible. ❤️🎉

    Reply
  • Excellent component. Close when you feel appreciated.
    Excellent component. Close when you feel appreciated.

    Sep 16, 2019

    Someone else also left a comment. I searched for a while for something to help me implement responsive masonry. I looked at everything I could find. This jumped out on reddit and this is by far the most functional of them all. Good job man.

    Close this when you feel appreciated. Cheers.

    Reply
  • HTML pages with Direction set to rtl
    HTML pages with Direction set to rtl

    Sep 24, 2019

    This is a great component, but setting the dir attribute of the HTML page to rtl instead of ltr will cause a bug. The cells will be displaced outside of the containing grid.

    Reply
  • WARNING:  Please update the following components: AnimatedComponent
    WARNING: Please update the following components: AnimatedComponent

    Feb 14, 2020

    I am getting this warning on my console:

    componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details...... Please update the following components: AnimatedComponent

    I figured it's the react-spring dependency that needs to be updated. How do I go about this please?

    Reply
  • Typo fix and Cljs + Reagent Usage instructions
    Typo fix and Cljs + Reagent Usage instructions

    Aug 2, 2021

    Usage Instructions for folks using Clojurescript with Reagent

    Reply
  • We need update?
    We need update?

    Dec 27, 2021

    Hello, We need update this packages.

    Reply
  • implement transitionMount prop
    implement transitionMount prop

    Nov 1, 2018

    This MR Delays rendering inner children if transitionMount is false or the container sizes have yet to be calculated

    I'm not sure if this is the best way to achieve this, but it worked for my use case

    Reply
  • disable animation
    disable animation

    Mar 18, 2019

    hi we want to disable animation on mobile, transitionMount={false} didnt work for us. any other options we miss ?

    Reply
  • Maximize is too large - to entire height of Grid Component
    Maximize is too large - to entire height of Grid Component

    Oct 10, 2018

    Hi @drcmda - Thanks so much for all your work on this. It looks really awesome. I'm trying to get this running on a website so that I can use it as a gallery. I've dropped your simple demo from https://codesandbox.io/embed/z6ly40071p into my project and haven't altered anything yet.

    The issue I'm having is that when the cell is maximized, it opens to 100% width and height of the entire Grid component. This ends up placing the contents of the maximized cell far off the screen.

    In each of your demos, it appears that the cell is only opening to 100vh - which is what I would like.

    To sum it up: My Issue: maximize is opening far taller than what is visible on the screen My Goal: Maximize opens cell/content to 100vh and 100vw

    Any Ideas?

    Thank you in advance for any guidance you might have.

    Thank you for your time.

    Reply
  • A problem with the z-index in the demo
    A problem with the z-index in the demo

    Aug 13, 2018

    In the simplfied demo the text is appearing under the overlay while testing it on the mobile. Maybe we need to increase the z-index to handle it on the mobile

    Reply