react-simple-masonry v1.0.6
React Simple Masonry
Simple standalone wrapper component for rendering responsive masonry layouts.
Installation
npm i react-simple-masonry
Usage
With HTML Elements
Straightforward
Simply wrap your elements with the <Masonry>
component, and you should get a three-column masonry layout, with a gap of 1rem
between the columns.
<Masonry>
{
images.map((url, i) => <img src={url} key={i} />)
}
</Masonry>
Number of columns
To change the number of columns, pass in a columnCounts
object with a default value -
<Masonry columnCounts={{ default: 4 }}>
{
images.map((url, i) => <img src={url} key={i} />)
}
</Masonry>
Different columns for different screen sizes
To specify the number of columns to show up till particular breakpoints, pass in a columnCounts
object with the breakpoints you need, and a default value. The breakpoints are equivalent to max-width
media queries -
<Masonry
columnCounts={
{
600: 1,
800: 2,
1000: 3,
default: 4
}
}
>
{
images.map((url, i) => <img src={url} key={i} />)
}
</Masonry>
Gap between columns
To specify the size of the gap between columns -
<Masonry
columnCounts={
{
600: 1,
800: 2,
1000: 3,
default: 4
}
}
columnGap="2rem"
>
{
images.map((url, i) => <img src={url} key={i} />)
}
</Masonry>
With Custom Components
Rendering custom components is similar to how one would render regular elements, except that the component must add the style passed in by the Masonry
component.
For example, if your implementation looks like this:
<Masonry
columnCounts={
{
600: 1,
800: 2,
default: 3
}
}
columnGap="1rem"
>
{
images.map((url, i) => <MyComponent url={url} key={i} />)
}
</Masonry>
then your MyComponent
component must do this:
// accept masonry_item_style among other props...
export function MyComponent({masonry_item_style}){
// ...your code
return (
// you can add your own styles after masonry_item_style like so
// style={{
// ...masonry_item_style,
// background: "wheat",
// ...etc
// }}
<div style={{...masonry_item_style}}>
// ...rest of the component
</div>
)
}