pyramid
Responsive masonry grid with infinte scroll and lazy loading, built with react.
Install
npm install react-pyramid --save
Basic usage
<Pyramid elements={elements} />
Elements is an array of objects, example:
elements = [
{
type: "img", //not actually needed, since it defaults to img. (optional)
src: "images/cat.png", //local or external url. (required)
orgWidth: 1080, //the original width of the image (required)
orgHeight: 1080 //the original height of the image (required)
href: "images/cat.png" //give image a link (optional)
},
{
type: "iframe",
src: "http://foo.bar/dog.html", //required
orgWidth: 1337, //required
orgHeight: 1337 //required
}
]
Props
elements – Array of objects, required
The array of objects to render. See example above, or check out the source code of the demo.
numberOfColumns – Object, optional
How many columns should the pyramid have for different breakpoints? Currently only supports the px unit.
defaults setting:
numberOfColumns: {
default: 1,
breakpoints: {
"768px" : 2,
"1024px" : 3,
"1280px" : 4,
"1440px" : 5
}
}
magicValues: Object, optional
This one is a bit tricky to explain. I will do my best.
- An element is only rendered if it is in view (or if it has already been rendered)
- Basically, when determening whether an element is in view or not, the magicValue is a factor which stretches the boundary so to speak. More concretely, it is "streched" by magicValue * height of pyramid.
This is really nice to have and let's you "preload" elements just before they are scrolled into view.
defaults setting:
magicValues: {
default: 0
}
example setting:
magicValues: {
default: 1,
breakpoints: {
"768px" : 0.2
}
}
baseClass: String, optional
The "block" in BEM, when giving component class names.
Defaults to "pyramid", which in turn gives the element container the class "pyramid__element", and the element "pyramid__element__[type]", where type is the type of the element (ex: img).
gutter: Number, optional
The gutter, which is used around the pyramid and between the elements.
Default: 20
transition: String, optional
The CSS transition property value which is applied to all elements.
Default: "all 300ms linear".
Apply "none" to turn this off.
derenderIfNotInViewAnymore: Boolean, optional
Should the element be derendered if it is no longer in view? (.ie the user has scrolled past it)
Default false
style: Object, optional
Self explanatory. Used to style the pyramid component.
Default CSS:
display: "block",
position: "relative",
width: "100%",
height: "100%",
clear: "both",
overflowY: "auto"
onElementClick: Function, optional
In case you want to handle what happenes when clicking on an element.
Usage example:
handleElementClick(elementProps, event) {
console.log("elementProps", elementProps);
console.log("event", event);
}
…
<Pyramid elements={elements} onElementClick={this.handleElementClick} />