Simple Masonry Layout For React Based On Flexbox

Just another masonry layout for React based on CSS flexbox.

How to use it:

1. Installation.

# NPM
$ npm i @bakunya/react-masonry

2. Import the component.

import { useState, memo, useCallback, useEffect } from 'react'
import Masonry from '@bakunya/react-masonry'

3. Add a basic masonry layout to the app.

<Masonry
  dataArray={images}
  columnCount={column}
  ChildsElement={ImageElement}
/>

const initialImages = [
  "1.jpg",
  "2.jpg",
  "3.jpg",
]
const ImageElement = memo(({ value }) => (
  <div style={{ borderRadius: '10px', margin: '5px' }}>
    <img src={value} style={{ width: '100%', borderRadius: '10px' }} />
  </div>
))

Preview:

Download Details:

Author: bakunya

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/bakunya/react-masonry

License: MIT