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