A React.js Packery component. (Also available as a mixin if needed)
React >= 0.14.x
$ npm install react-packery-component --save
-
The component bundles Packery, so no additional dependencies needed!
-
You can optionally include Packery as a script tag if there should be any reason for doing so:
<script src='//cdnjs.cloudflare.com/ajax/libs/packery/1.3.0/packery.pkgd.min.js' />
-
To use the component just require the module
-
Example es5 code:
var React = require('react');
var Packery = require('react-packery-component');
var packeryOptions = {
transitionDuration: 0
};
var Gallery = React.createClass({
render: function () {
var childElements = this.props.elements.map(function(element){
return (
<li className="image-element-class">
<img src={element.src} />
</li>
);
});
return (
<Packery
className={'my-gallery-class'} // default ''
elementType={'ul'} // default 'div'
options={packeryOptions} // default {}
disableImagesLoaded={false} // default false
>
{childElements}
</Packery>
);
}
});
module.exports = Gallery;
- Example es2015 code:
import React,{Component} from 'react';
import Packery from 'react-packery-component';
const packeryOptions = {
transitionDuration: 0
};
class Gallery extends Component {
constructor() {
super();
}
render() {
const childElements = this.props.elements.map((element) => {
return (
<li className="image-element-class">
<img src={element.src} />
</li>
);
});
return (
<Packery
className={'my-gallery-class'} // default ''
elementType={'ul'} // default 'div'
options={packeryOptions} // default {}
disableImagesLoaded={false} // default false
>
{childElements}
</Packery>
);
}
});
export default Gallery;
Should you need to access the instancy of Packery, you can do so by using the ref
callback from the component.
import React,{Component} from 'react';
import Packery from 'react-packery-component';
class Gallery extends Component {
handleLayoutComplete: function() { },
componentDidMount: function() {
this.packery.on('layoutComplete', this.handleLayoutComplete);
},
componentWillUnmount: function() {
this.packery.off('layoutComplete', this.handleLayoutComplete);
}
render() {
const childElements = this.props.elements.map((element) => {
return (
<li className="image-element-class">
<img src={element.src} />
</li>
);
});
return (
<Packery
ref={function(c) {this.packery = this.packery || c.packery;}.bind(this)}
>
{childElements}
</Packery>
);
}
});
export default Gallery;
import React,{Component} from 'react';
import Packery from 'react-packery-component';
const packeryOptions = {
transitionDuration: 0
};
export default class Gallery extends Component {
render() {
const childElements = this.props.elements.map((element) => {
return (
<li className="image-element-class">
<img src={element.src} />
</li>
);
});
return (
<Packery
className={'my-gallery-class'} // default ''
elementType={'ul'} // default 'div'
options={packeryOptions} // default {}
disableImagesLoaded={false} // default false
imagesLoadedEvent={[
{
name: "always",
event: (instance)=>console.log('ALWAYS - all images have been loaded')
},
{
name: "done",
event: (instance) => console.log("DONE - all images have been successfully loaded")
},
{
name: "fail",
event: (instance)=> console.log("FAIL - all images loaded, at least one is broken")
},
{
name: "progress",
event: (instance, image)=> {
let result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src );
}
}
]}
>
{childElements}
</Packery>
);
}
}