react-planks v0.0.11
react-planks
A React component to create responsive masonry (pinterest style) layouts.
What's special about planks, and why should I use it?
- Simple to use: use it to horizontally order any existing components you have.
- Comes with no-frills: forget about expensive animations that slow down the browser.
- It's fast and takes advantage of React's built-in ability to optimize renderings.
- Responsiveness baked in from mobile up to any size really.
- Customizable: options let you define breakpoints and padding.
This project is currently in development. Use at your own risk.
TODO:
- Tests
- Linting
- CI
Demo
Coming soon
Installation
npm install react-planks
or clone from github and build from source using babel.
Usage
The Planks component can be incldued in any React project.
ES6:
import React from 'react';
import ReactDOM from 'react-dom';
import Planks from 'react-planks';
let elementsArr = [
/* Array of any other React component/element. Bootstrap 4 cards perhaps? */
];
// Optional. See below.
let options = {
'breakpoints': {
'544': 1,
'768': 2,
'992': 3,
'1200': 4,
'1600': 5
},
'horizontalPadding': 1,
'verticalPadding': 0,
'unitType': 'rem'
};
ReactDOM.render(
<Planks options={ options }>{ elementsArr }</Planks>,
document.getElementById('planksNode')
);
Images:
React Planks handles images! If your components contain images, make sure to pass in the prop, hasImage={ true }
.
Here's an example of a component with the prop:
<div className='card' hasImage={ true }>
<img src='path-to-image.jpg' />
</div>
The reason why react-planks needs a flag for images is because images load into the actual DOM unpredictably after the
React component renders. Simply waiting for render to complete without the hasImage
prop will lead to incorrect
position calculations possibly based on a non-rendered image. Behind the scenes react-planks looks for the hasImage
prop and executes a callback on the onLoad
or onError
event.
Options
If no options are passed in, the following defaults are used:
Responsive Breakpoints:
The default breakpoint settings match those from Bootstrap specifically xs, sm, md, and lg. If a screen width is greater than the largest defined breakpoint, the column number from the largest defined breakpoint is carried forward.
Up to Width (pixels) | Number of Columns |
---|---|
544 | 1 |
768 | 2 |
992 | 3 |
1200 | 4 |
Element Padding
The padding between the sorted elements.
horizontalPadding: 1
in rem
verticalPadding: 0
in rem
Unit Type
Default: rem