React Masonry Layout

A flexible and customizable masonry layout component for React. Perfect for creating Pinterest-style image galleries, card layouts, and more.

Features

• 🎯 Flexible Layout - Depending on your images
• 🖼️ Image Optimized - Built-in image loading and error handling
• 🎨 Fully Customizable - Custom styles, classes, and CSS variables
• 📱 Responsive - Automatically adapts to container size
• ♿ Accessible - Proper ARIA labels and keyboard navigation
• 🔧 TypeScript - Fully typed for better development experience
• 🎪 Zero Dependencies - Lightweight and fast

Usage

const imagesArray=
    [
      { src: 'https://picsum.photos/450/400?image=175', name: 'Test Image' },
      { src: 'https://picsum.photos/350/500?image=80', name: 'Test Image' },
      { src: 'https://picsum.photos/250/300?image=185', name: 'Test Image' },
    ]

<Masonry
  columns={3}//If you don't define columns, then it is up to the size of window by default
  gutterInPx = {3}//Gap between columns
  showItemIndex = {false}
  roundInPx = {5}
  customContainerStyle={{backgroundColor:'cyan'}}
  customContainerClass={'masonry-container-class'}>

  {imagesArray.map((image, index) => (
    <ImageBox
      key={index}
      src={image.src}//Or whatever your properity name is
      alt={image.name || 'No name'}//Or whatever your properity name is
      index={index}//For item index display
      roundInPx={3}
      gutterInPx={5}//Margin bottom
      customStyle={{backgroundColor:'cyan'}}
      customClass={"item-class"}
      customMaskStyle={{color:'blue'}}
      customMaskClass={"item-mask-class"}
      onError={() => console.warn(`Failed to load image ${index + 1}`)}
    />
  ))
  }
</Masonry>

Installation

npm install react-masonry-layout