react-masonry-component alternatives and similar libraries
Based on the "UI Layout" category.
Alternatively, view react-masonry-component 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-stonecutter
Animated grid layout component for React. -
hedron
A no-frills flexbox grid system for React, powered by styled-components. -
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-masonry-mixin
A React.js mixin for using @desandro's Masonry. -
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
Do you think we are missing an alternative of react-masonry-component or a related project?
README
React Masonry Component
IE8 support
if you wish to have IE8 support, v2 with React 0.14 is the highest version available.
Table of contents
Introduction:
A React.js Masonry component. (Also available as a mixin if needed)
Live demo:
Usage:
- The component is bundled with Masonry, so no additional dependencies needed!
You can optionally include Masonry as a script tag if there should be any reason for doing so
<script src='//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js' />
To use the component just require the module.
Basic usage
npm install --save react-masonry-component
import * as React from 'react';
import Masonry from 'react-masonry-component';
const masonryOptions = {
transitionDuration: 0
};
const imagesLoadedOptions = { background: '.my-bg-image-el' }
class Gallery extends React.Component {
render() {
const childElements = this.props.elements.map(function(element){
return (
<li className="image-element-class">
<img src={element.src} />
</li>
);
});
return (
<Masonry
className={'my-gallery-class'} // default ''
elementType={'ul'} // default 'div'
options={masonryOptions} // default {}
disableImagesLoaded={false} // default false
updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
imagesLoadedOptions={imagesLoadedOptions} // default {}
>
{childElements}
</Masonry>
);
}
}
export default Gallery;
ES6-style modules are also supported, just use:
import Masonry from 'react-masonry-component';
Custom props
You can also include your own custom props - EG: inline-style and event handlers.
import * as React from 'react';
import Masonry from 'react-masonry-component';
const masonryOptions = {
transitionDuration: 0
};
const style = {
backgroundColor: 'tomato'
};
class Gallery extends React.Component {
handleClick() {}
render() {
return (
<Masonry
className={'my-gallery-class'}
style={style}
onClick={this.handleClick}
>
{...}
</Masonry>
);
}
}
export default Gallery;
Accessing Masonry instance
Should you need to access the instance of Masonry (for example to listen to masonry events)
you can do so by using refs
.
import * as React from 'react';
import Masonry from 'react-masonry-component';
class Gallery extends React.Component {
handleLayoutComplete() { },
componentDidMount() {
this.masonry.on('layoutComplete', this.handleLayoutComplete);
},
componentWillUnmount() {
this.masonry.off('layoutComplete', this.handleLayoutComplete);
},
render() {
return (
<Masonry
ref={function(c) {this.masonry = this.masonry || c.masonry;}.bind(this)}
>
{...}
</Masonry>
);
}
}
export default Gallery;
Images Loaded Options
React Masonry Component uses Desandro's imagesloaded
library to detect when images have loaded. Should you want to pass
options down to it then you need to populate the imagesLoadedOptions
property on React Masonry Component.
This will most commonly be used when the elements in your gallery have CSS background images and you want to capture their load event. More info availabe on the imagesloaded website.
eg:
import * as React from 'react';
import Masonry from 'react-masonry-component';
class Gallery extends React.Component {
render() {
const imagesLoadedOptions = { background: '.my-bg-image-el' }
return (
<Masonry
className={'my-gallery-class'}
elementType={'ul'}
options={masonryOptions}
imagesLoadedOptions={imagesLoadedOptions}
>
<div className="my-bg-image-el"></div>
</Masonry>
);
}
}
export default Gallery;
Events
onImagesLoaded
- triggered when all images are loaded or after each image is loaded whenupdateOnEachImageLoad
is set totrue
onLayoutComplete
- triggered after a layout and all positioning transitions have completed.onRemoveComplete
- triggered after an item element has been removed
class Gallery extends React.Component {
componentDidMount() {
this.hide();
},
handleImagesLoaded(imagesLoadedInstance) {
this.show();
},
render() {
return (
<Masonry
onImagesLoaded={this.handleImagesLoaded}
onLayoutComplete={laidOutItems => this.handleLayoutComplete(laidOutItems)}
onRemoveComplete={removedItems => this.handleRemoveComplete(removedItems)}
>
{...}
</Masonry>
)
}
}