Popularity
3.0
Declining
Activity
0.0
Stable
174
5
37
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-flexbox-grid
A set of React components implementing flexboxgrid with the power of CSS Modules. -
react-spaces
React components that allow you to divide a page or container into nestable anchored, scrollable and resizable spaces. -
flexbox-react
DISCONTINUED. 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-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
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Promo
surveyjs.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;