@webibee/easy-masonry-react

This is a masonry component that can be use to render any set of elements in Masonry fashion.

🫶 Usage

Example array of images

const IMG = [
{
  src: "https://picsum.photos/id/1/500/500"

},
{
  src: "https://picsum.photos/id/2/500/500"

},
{
  src: "https://picsum.photos/id/3/500/500"
},
  {
  src: "https://picsum.photos/id/4/500/500"
},
  {
  src: "https://picsum.photos/id/5/500/500"
},
  {
  src: "https://picsum.photos/id/6/500/500"
},
];

Add the elements for Masonry as children mentioned below

<Masonry>
    {IMG.map((item, idx) => (
          <img
            alt="..."
            src={item.src}
            className={` max-w-full rounded-md overflow-hidden object-cover object-center`}
            key={idx}
          />
        ))}
</Masonry>

Props

Prop	Options	Desc ß
height	screen fill	REQUIRED: default is screen .
columnCount	{350:1,900:2}	REQUIRED breakpoints and the number of columns.
speed	20s	default is 20s.
stopOnHover	false true	default is false.
animation	false true	default is false.

 ## License

MIT. © 2024 Webibee