Popularity
3.1
Growing
Activity
0.0
Stable
174
6
37
Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
react-masonry-mixin alternatives and similar libraries
Based on the "UI Layout" category.
Alternatively, view react-masonry-mixin alternatives based on common mentions on social networks and blogs.
-
react-grid-layout
A draggable and resizable grid layout with responsive breakpoints, for React. -
golden-layout
A multi window layout manager for webapps -
react-flexbox-grid
A set of React components implementing flexboxgrid with the power of CSS Modules. -
react-masonry-component
A React.js component for using @desandro's Masonry -
react-stonecutter
Animated grid layout component for React -
react-spaces
React components that allow you to divide a page or container into nestable anchored, scrollable and resizable spaces. -
hedron
A no-frills flexbox grid system for React, powered by styled-components. -
particles-bg
React particles animation background component -
react-reflex
Resizable Flex layout container components for advanced React web applications -
react-layout-components
Layout Components for React based on Flexbox -
flexbox-react
Unopinionated, standard compliant flexbox components. You don't need to learn any propietary syntax. If you know how to use flexbox, you know how to use flexbox-react components. -
react-stack-grid
Pinterest like layout components for React.js. -
m-react-splitters
React splitter component, written in TypeScript. -
react-inline-grid
Predictable flexbox based grid for React. -
react-resizer
A React component for resizing HTML elements. -
Spokestack Tray
React Native component for adding Spokestack to a React Native app -
react-colrow
Smarter layout components. Based on css flexbox. Support responsive design, Typescript, server side render. 3 KB gzipped. -
react-schematic
Build responsive react layouts using styled schematics without an overhead of any theme configuration
Appwrite - The open-source backend cloud platform
The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!
Promo
appwrite.io
Do you think we are missing an alternative of react-masonry-mixin or a related project?
README
React Masonry Mixin
Introduction:
A React.js Masonry mixin. (Also available as a component - you should use that instead!)
Live demo:
hearsay.me (web) hearsay.me (github)
Usage:
- The mixin is now bundled with Masonry, so no additional dependencies needed!
You will have to use Masonry as a script dependency, as there is no complete npm module available at the moment.You can optionally include Masonry as a script tag
<script src='//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js' />
To use the mixin
- require the mixin and inject
React
- pass a reference and a masonry options object
- make sure you use the same reference as
ref
in your component - if you need to - access the masonry object through
this.masonry
in your component
- require the mixin and inject
example code
var React = require('react');
var MasonryMixin = require('react-masonry-mixin')(React);
var masonryOptions = {
transitionDuration: 0
};
var SomeComponent = React.createClass({
mixins: [MasonryMixin(React)('masonryContainer', masonryOptions)],
render: function () {
var childElements = this.props.elements.map(function(element){
return (
<div className="someclass">
{element.name}
</div>
);
});
return (
<div ref="masonryContainer">
{childElements}
</div>
);
}
});
module.exports = SomeComponent;