open-index/open-npm huggingface dataset:
npm package: @somwhy/react-masonry-layout
Description: A flexible and customizable masonry layout component for React. Perfect for creating Pinterest-style image galleries, card layouts, and more.
Latest version: 0.0.1

# React Masonry Layout

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

![npm](https://www.npmjs.com/package/@somwhy/react-masonry-layout/v/0.0.0)
![license](https://img.shields.io/npm/l/react-masonry-layout)
![downloads](https://img.shields.io/npm/dm/react-masonry-layout)

## 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

```js

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' },
    ]


```
```js
<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

```bash
npm install react-masonry-layout
```