Popularity
2.9
Declining
Activity
0.0
Stable
176
5
38
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-screen javascript Layout manager. -
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-reflex
Flex layout container component 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. -
particles-bg
React particles animation background component -
react-inline-grid
Predictable flexbox based grid for React. -
m-react-splitters
React splitter component, written in TypeScript. -
react-stack-grid
Pinterest like layout components for React.js. -
react-resizer
A React component for resizing HTML elements. -
react-colrow
Responsive grid layout components. Based on css flexbox. Support fraction width, auto grow.
Get performance insights in less than 4 minutes
Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
Sponsored
scoutapm.com
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;