Skip to content

SOMWHY/react-masonry-layout

Repository files navigation

React Masonry Layout

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

npm license downloads

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

About

Source code of npm library react-masonry-layout, which is a handy components lib

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published