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

  •        36

These two would work outside the Grids context if you wanted to use them elsewhere. mauerwerk depends on react-spring and react-measure.


@babel/runtime : ^7.0.0
react-measure : ^2.1.2
react-spring : ^5.7.2



Related Projects

react-stack-grid - Pinterest like layout components for React.js

  •    Javascript

Pinterest like layout components for React.js. You can install the react-stack-grid from npm.

react-native-masonry - :raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions

  •    Javascript

"Bricks" are the basic building block of the masonry and are passed into the props.bricks. They essentially represent the items within each column and require a uri property at a minimum. However, you can freely add additional properties to the data property if you need access to certain data within your brick.onPress handler and footer/header renderer. The following properties are available.

react-spring - 🙌 Helping react-motion and animated to become best friends

  •    Javascript

A set of simple, spring-physics based primitives (as in building blocks) that should cover most of your UI related animation needs once plain CSS can't cope any longer. Forget easings, durations, timeouts and so on as you fluidly move data from one state to another. This isn't meant to solve each and every problem but rather to give you tools flexible enough to confidently cast ideas into moving interfaces. react-spring is a cooked down fork of Christopher Chedeau's animated (which is used in react-native by default). It is trying to bridge it with Cheng Lou's react-motion. Although both are similarily spring-physics based they are still polar opposites.

react-motion - A spring that solves your animation problems.

  •    Javascript

Animate a counter from 0 to 10. For more advanced usage, see below. Works with React-Native v0.18+.

angulargrid - Pinterest like responsive masonry grid system for angular

  •    Javascript

agular-grid-id and angular-grid-options deprecated, use ag-id and ag-options instead.

react-masonry-component - A React.js component for using @desandro's Masonry

  •    Javascript

if you wish to have IE8 support, v2 with React 0.14 is the highest version available. To use the component just require the module.

react-move - React Move 🌀 Beautiful, data-driven animations for React

  •    Javascript

Beautiful, data-driven animations for React. React-move allows you to define your animations using durations, delays and ease functions. In react-motion you use spring configurations to define your animations.

react-native-animatable - Standard set of easy to use animations and declarative transitions for React Native

  •    Javascript

To make looping animations simply set the iterationCount to infinite. Most animations except the attention seekers work best when setting direction to alternate. You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a duration property, a spring animation will be used.

data-driven-motion - Easily animate your data in react

  •    Javascript

This is a small wrapper around react-motion with the intention of simplifying the api for my most common use case.

react-animated-tree - 🌲Simple to use, configurable tree view with full support for drop-in animations

  •    Javascript

A simple, configurable tree view control for React. Create your own effects by passing a react-spring config. The config below is the default (items fade in while moving in 20px from the right). You can go wild here by rotating, flipping, etc.

masonry - :love_hotel: Cascading grid layout library

  •    HTML

Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. See for complete docs and demos.

angular-deckgrid - A lightweight masonry-like grid for AngularJS.

  •    Javascript

A lightweight masonry-like grid for AngularJS. Include angular-deckgrid in your HTML.

salvattore - A jQuery Masonry alternative with CSS-driven configuration.

  •    Javascript

Salvattore is a library agnostic JS script that will help you organize your HTML elements according to the number of columns you specify, like jQuery Masonry. To find out more and see it in action, please visit our website.

AutolayoutExampleWithMasonry - Different Autolayout examples with Masonry

  •    Objective-C

Different Autolayout examples with Masonry. 用Masonry写的Autolayout案例,持续更新中。详细解答请看

react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules

  •    Javascript

react-flexbox-grid is a set of React components that implement flexboxgrid.css. It even has an optional support for CSS Modules with some extra configuration.react-flexbox-grid imports the styles from flexboxgrid, that's why we're configuring the loader for it.

react-native-super-grid - Responsive Grid View for React Native

  •    Javascript

Responsive Grid View for React Native. This component renders a Grid View that adapts itself to various screen resolutions.