@webibee/easy-masonry-react NPM

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.