56

GitHub - drcmda/mauerwerk: ⚒ A react-spring driven masonry-like grid with enter...

 6 years ago
source link: https://github.com/drcmda/mauerwerk
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

README.md

Build Status npm version

npm install mauerwerk

Animated masonry-like react-grid with enter/exit transitions and maximized cells.

grid.gif

     

Demo: https://codesandbox.io/embed/048079xzw

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

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)
  heights={d => d.height}
  // Number of columns (make it responsive yourself using react-measure/react-media for instance)
  columns={2}
  // Space between elements
  margin={30}
  // Removes the possibility to scroll away from a maximized element
  lockScroll={false}
  // Delay when maximized elements are minimized again
  inactiveDelay={500}>
  {(data, maximized, toggle) => (
    <div>
      {data.title}
      {maximized && <div>Maximized content here</div>}
      <button onClick={toggle}>{maximized ? '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, and optionally 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. maximized, the cells state, depending on whether it is true or false you can display alternating content or use further animation prototypes to transition from cell-state to maximized-state
  3. toggle, use this to maximize/minimize your cell

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK