### Install react-responsive-masonry

Source: https://context7.com/cedricdelpoux/react-responsive-masonry/llms.txt

Provides commands for installing the library using npm, yarn, or via a CDN.

```bash
# npm
npm install react-responsive-masonry --save

# yarn
yarn add react-responsive-masonry

# CDN (UMD build)
# <script src="https://unpkg.com/react-responsive-masonry/umd/react-responsive-masonry.js"></script>
```

--------------------------------

### Start Gatsby Development Server

Source: https://github.com/cedricdelpoux/react-responsive-masonry/blob/master/example/README.md

Navigate into your new Gatsby project directory and start the development server. This command builds the site and makes it available locally for development.

```shell
cd my-hello-world-starter/
gatsby develop
```

--------------------------------

### Basic Usage Example

Source: https://context7.com/cedricdelpoux/react-responsive-masonry/llms.txt

Demonstrates how to use ResponsiveMasonry with columnsCountBreakPoints and gutterBreakPoints to create a responsive image gallery.

```APIDOC
## Basic Usage Example

### Description
This example shows a basic implementation of `ResponsiveMasonry` where both the number of columns and the gutter size change based on predefined breakpoints.

### Code
```jsx
import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"

const images = [
  "https://picsum.photos/200/300",
  "https://picsum.photos/400/400",
  "https://picsum.photos/400/300",
  "https://picsum.photos/200/200",
  "https://picsum.photos/500/400",
  "https://picsum.photos/400/500",
  "https://picsum.photos/200/300",
  "https://picsum.photos/300/300",
  "https://picsum.photos/300/300",
]

const GalleryPage = () => (
  <ResponsiveMasonry
    columnsCountBreakPoints={{350: 1, 750: 2, 900: 3, 1200: 4}}
    gutterBreakPoints={{350: "8px", 750: "12px", 900: "16px", 1200: "24px"}}
  >
    <Masonry>
      {images.map((src, i) => (
        <img
          key={i}
          src={src}
          alt=""
          style={{width: "100%", display: "block", borderRadius: 4}}
        />
      ))}
    </Masonry>
  </ResponsiveMasonry>
)
```
```

--------------------------------

### Usage Example

Source: https://github.com/cedricdelpoux/react-responsive-masonry/blob/master/README.md

Illustrates how to use the Masonry and ResponsiveMasonry components in a React application.

```APIDOC
## Usage Example

### Responsive Layout
Wrap `Masonry` with `ResponsiveMasonry` for dynamic column and gutter changes.

```js
import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"

class MyWrapper extends React.Component {
    render() {
        return (
            <ResponsiveMasonry
                columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
                gutterBreakPoints={{350: "12px", 750: "16px", 900: "24px"}}
            >
                <Masonry>
                    <ChildA />
                    <ChildB />
                    {/* Children */}
                    <ChildY />
                    <ChildZ />
                </Masonry>
            </ResponsiveMasonry>
        )
    }
}
```

### Fixed Layout
Use `Masonry` directly for a fixed number of columns.

```js
import React from "react"
import Masonry from "react-responsive-masonry"

class MyWrapper extends Component {
    render() {
        return (
            <Masonry columnsCount={3}>
                <ChildA />
                <ChildB />
                {/* Children */}
                <ChildY />
                <ChildZ />
            </Masonry>
        )
    }
}
```
```

--------------------------------

### Responsive Masonry Layout Example

Source: https://github.com/cedricdelpoux/react-responsive-masonry/blob/master/demo/src/Examples/Responsive/index.md

This example shows how to use ResponsiveMasonry with breakpoint configurations for columns and gutters. Import Masonry and ResponsiveMasonry from 'react-responsive-masonry'. Define an array of image sources and map them to img elements within the Masonry component. Configure columnsCountBreakPoints and gutterBreakPoints props on ResponsiveMasonry to control layout changes.

```javascript
import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"

const images = [
    "https://picsum.photos/200/300?image=1050",
    //...
    "https://picsum.photos/300/300?image=206",
]

class MyWrapper extends React.Component {
    render() {
        return (
            <ResponsiveMasonry
                columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
                gutterBreakPoints={{"350": "5px", "750": "16px", "900": "2rem"}}
            >
                <Masonry>
                    {images.map((image, i) => (
                        <img
                            key={i}
                            src={image}
                            style={{width: "100%", display: "block"}}
                            alt=""
                        />
                    ))}
                </Masonry>
            </ResponsiveMasonry>
        )
    }
}
```

--------------------------------

### TypeScript Usage Example

Source: https://context7.com/cedricdelpoux/react-responsive-masonry/llms.txt

Provides a comprehensive example of using ResponsiveMasonry with TypeScript, including type definitions for props.

```APIDOC
## TypeScript Usage Example

### Description
This example demonstrates how to use `ResponsiveMasonry` and `Masonry` components with TypeScript, showcasing proper type imports and usage for `MasonryProps` and `ResponsiveMasonryProps`.

### Code
```tsx
import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"
import type {MasonryProps, ResponsiveMasonryProps} from "react-responsive-masonry"

const cardStyle: React.CSSProperties = {
  background: "#fff",
  borderRadius: 8,
  boxShadow: "0 1px 4px rgba(0,0,0,.1)",
  padding: 16,
}

interface Card {
  id: number
  title: string
  body: string
}

const cards: Card[] = [
  {id: 1, title: "Card A", body: "Short content."},
  {id: 2, title: "Card B", body: "A bit more content here that makes this card taller."},
  {id: 3, title: "Card C", body: "Medium length content for demonstration."},
  {id: 4, title: "Card D", body: "Even more content that makes this card the tallest of all."},
]

const masonryProps: MasonryProps = {
  columnsCount: 3,
  gutter: "16px",
}

const responsiveProps: ResponsiveMasonryProps = {
  columnsCountBreakPoints: {480: 1, 768: 2, 1024: 3},
  gutterBreakPoints: {480: "8px", 768: "12px", 1024: "16px"},
}

const CardMasonry: React.FC = () => (
  <ResponsiveMasonry {...responsiveProps}>
    <Masonry {...masonryProps}>
      {cards.map((card) => (
        <div key={card.id} style={cardStyle}>
          <h3 style={{margin: "0 0 8px"}}>{card.title}</h3>
          <p style={{margin: 0}}>{card.body}</p>
        </div>
      ))}
    </Masonry>
  </ResponsiveMasonry>
)

export default CardMasonry
```
```

--------------------------------

### SSR Gallery Example with ResponsiveMasonry

Source: https://context7.com/cedricdelpoux/react-responsive-masonry/llms.txt

This example demonstrates how to use ResponsiveMasonry in a Next.js application for server-side rendering. It configures breakpoint-specific column counts and gutters that adapt to viewport size after hydration.

```tsx
import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"

// On server: renders 1 column (350px breakpoint is first/smallest)
// After hydration: updates to 2 or 3 columns based on actual viewport
const Gallery: React.FC = () => (
  <ResponsiveMasonry
    columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
    gutterBreakPoints={{"350": "8px", "750": "16px", "900": "24px"}}
  >
    <Masonry>
      {Array.from({length: 9}, (_, i) => (
        <img
          key={i}
          src={`https://picsum.photos/seed/${i}/400/300`}
          alt=""
          style={{width: "100%", display: "block"}}
        />
      ))}
    </Masonry>
  </ResponsiveMasonry>
)

export default Gallery
```

--------------------------------

### Install react-responsive-masonry with Yarn or npm

Source: https://github.com/cedricdelpoux/react-responsive-masonry/blob/master/README.md

Use either yarn or npm to add the react-responsive-masonry package to your project dependencies.

```shell
yarn add react-responsive-masonry
npm install react-responsive-masonry --save
```

--------------------------------

### Basic Masonry Layout with Images

Source: https://github.com/cedricdelpoux/react-responsive-masonry/blob/master/demo/src/Examples/Masonry/index.md

This snippet shows a basic implementation of a masonry layout using react-responsive-masonry. It displays a list of images in a three-column layout with a 10px gutter. Ensure you have React and react-responsive-masonry installed.

```javascript
import React from "react"
import Masonry from "react-responsive-masonry"

const images = [
    "https://picsum.photos/200/300?image=1050",
    //...
    "https://picsum.photos/300/300?image=206",
]

class MyWrapper extends React.Component {
    render() {
        return (
            <Masonry columnsCount={3} gutter="10px">
                {images.map((image, i) => (
                    <img
                        key={i}
                        src={image}
                        style={{width: "100%", display: "block"}}
                    />
                ))}
            </Masonry>
        )
    }
}
```

--------------------------------

### Basic Masonry Grid with React

Source: https://context7.com/cedricdelpoux/react-responsive-masonry/llms.txt

Renders children into a fixed number of flexbox columns. Items are redistributed by height after the initial render to balance column heights. Requires `react-responsive-masonry` to be installed.

```jsx
import React from "react"
import Masonry from "react-responsive-masonry"

const images = [
  "https://picsum.photos/200/300",
  "https://picsum.photos/400/400",
  "https://picsum.photos/400/300",
  "https://picsum.photos/200/200",
  "https://picsum.photos/500/400",
  "https://picsum.photos/400/500",
]

// Basic 3-column masonry with a 10px gutter
const BasicMasonry = () => (
  <Masonry columnsCount={3} gutter="10px">
    {images.map((src, i) => (
      <img key={i} src={src} alt="" style={{width: "100%", display: "block"}} />
    ))}
  </Masonry>
)
```

```jsx
// Custom container/item HTML tags (e.g. semantic <ul>/<li>)
const SemanticMasonry = () => (
  <Masonry
    columnsCount={4}
    gutter="1rem"
    containerTag="ul"
    itemTag="li"
    style={{padding: 0, listStyle: "none"}}
    itemStyle={{listStyle: "none"}}
    className="my-masonry-grid"
  >
    {images.map((src, i) => (
      <img key={i} src={src} alt="" style={{width: "100%", display: "block"}} />
    ))}
  </Masonry>
)
```

```jsx
// Sequential mode — items placed in source order (top-to-bottom, left-to-right) 
// rather than being redistributed by height
const SequentialMasonry = () => (
  <Masonry columnsCount={3} gutter="8px" sequential={true}>
    {images.map((src, i) => (
      <img key={i} src={src} alt="" style={{width: "100%", display: "block"}} />
    ))}
  </Masonry>
)
```

--------------------------------

### Masonry with Mixed Content and Null Filtering

Source: https://context7.com/cedricdelpoux/react-responsive-masonry/llms.txt

This example shows how Masonry automatically filters out null, undefined, and empty string children. It renders a mix of images and styled divs, ensuring only valid elements are distributed into columns.

```jsx
import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"

const items = [
  {type: "image", src: "https://picsum.photos/200/300"},
  null,                        // skipped automatically
  {type: "card", text: "Hello"},
  undefined,                   // skipped automatically
  {type: "image", src: "https://picsum.photos/400/400"},
  "",                          // skipped automatically
  {type: "card", text: "World"},
]

const MixedMasonry = () => (
  <ResponsiveMasonry columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}>
    <Masonry gutter="12px">
      {items.map((item, i) => {
        if (!item) return null
        if (item.type === "image")
          return <img key={i} src={item.src} alt="" style={{width: "100%"}} />
        return (
          <div key={i} style={{padding: 16, background: "#f5f5f5", borderRadius: 8}}>
            {item.text}
          </div>
        )
      })}
    </Masonry>
  </ResponsiveMasonry>
)
```

--------------------------------

### Create Gatsby Site with Hello-World Starter

Source: https://github.com/cedricdelpoux/react-responsive-masonry/blob/master/example/README.md

Use the Gatsby CLI to create a new site using the hello-world starter. This command initializes a new project with the specified starter template.

```shell
gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world
```

--------------------------------

### Responsive Masonry with Image Gallery

Source: https://context7.com/cedricdelpoux/react-responsive-masonry/llms.txt

Demonstrates how to use ResponsiveMasonry to create a responsive image gallery. Breakpoints for both column count and gutter size are defined.

```jsx
import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"

const images = [
  "https://picsum.photos/200/300",
  "https://picsum.photos/400/400",
  "https://picsum.photos/400/300",
  "https://picsum.photos/200/200",
  "https://picsum.photos/500/400",
  "https://picsum.photos/400/500",
  "https://picsum.photos/200/300",
  "https://picsum.photos/300/300",
  "https://picsum.photos/300/300",
]

// Columns and gutters both change at breakpoints
// Breakpoint keys are minimum widths in px (applied when windowWidth > breakpoint)
const GalleryPage = () => (
  <ResponsiveMasonry
    columnsCountBreakPoints={{350: 1, 750: 2, 900: 3, 1200: 4}}
    gutterBreakPoints={{350: "8px", 750: "12px", 900: "16px", 1200: "24px"}}
  >
    <Masonry>
      {images.map((src, i) => (
        <img
          key={i}
          src={src}
          alt=""
          style={{width: "100%", display: "block", borderRadius: 4}}
        />
      ))}
    </Masonry>
  </ResponsiveMasonry>
)

// With className/style on the ResponsiveMasonry wrapper itself
const StyledGallery = () => (
  <ResponsiveMasonry
    columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
    className="gallery-wrapper"
    style={{maxWidth: 1200, margin: "0 auto"}}
  >
    <Masonry gutter="16px">
      {images.map((src, i) => (
        <div key={i} style={{border: "1px solid #eee", borderRadius: 8, overflow: "hidden"}}>
          <img src={src} alt="" style={{width: "100%", display: "block"}} />
        </div>
      ))}
    </Masonry>
  </ResponsiveMasonry>
)
```

--------------------------------

### Include react-responsive-masonry via UNPKG CDN

Source: https://github.com/cedricdelpoux/react-responsive-masonry/blob/master/README.md

If not using a package manager, include the library directly in your HTML using the UNPKG CDN link.

```html
https://unpkg.com/react-responsive-masonry/umd/react-responsive-masonry.js
```

--------------------------------

### TypeScript Usage with ResponsiveMasonry

Source: https://context7.com/cedricdelpoux/react-responsive-masonry/llms.txt

Illustrates how to use ResponsiveMasonry with TypeScript, including defining types for props and component structure.

```tsx
import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"
import type {MasonryProps, ResponsiveMasonryProps} from "react-responsive-masonry"

const cardStyle: React.CSSProperties = {
  background: "#fff",
  borderRadius: 8,
  boxShadow: "0 1px 4px rgba(0,0,0,.1)",
  padding: 16,
}

interface Card {
  id: number
  title: string
  body: string
}

const cards: Card[] = [
  {id: 1, title: "Card A", body: "Short content."},
  {id: 2, title: "Card B", body: "A bit more content here that makes this card taller."},
  {id: 3, title: "Card C", body: "Medium length content for demonstration."},
  {id: 4, title: "Card D", body: "Even more content that makes this card the tallest of all."},
]

const masonryProps: MasonryProps = {
  columnsCount: 3,
  gutter: "16px",
}

const responsiveProps: ResponsiveMasonryProps = {
  columnsCountBreakPoints: {480: 1, 768: 2, 1024: 3},
  gutterBreakPoints: {480: "8px", 768: "12px", 1024: "16px"},
}

const CardMasonry: React.FC = () => (
  <ResponsiveMasonry {...responsiveProps}>
    <Masonry {...masonryProps}>
      {cards.map((card) => (
        <div key={card.id} style={cardStyle}>
          <h3 style={{margin: "0 0 8px"}}>{card.title}</h3>
          <p style={{margin: 0}}>{card.body}</p>
        </div>
      ))}
    </Masonry>
  </ResponsiveMasonry>
)

export default CardMasonry
```

--------------------------------

### Responsive Masonry with Window Resize

Source: https://github.com/cedricdelpoux/react-responsive-masonry/blob/master/README.md

Wrap the Masonry component with ResponsiveMasonry to dynamically adjust the number of columns and gutter based on window size. Define breakpoints for columns and gutters using the respective props.

```javascript
import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"

// The number of columns and the gutter change by resizing the window
class MyWrapper extends React.Component {
    render() {
        return (
            <ResponsiveMasonry
                columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
                gutterBreakPoints={{350: "12px", 750: "16px", 900: "24px"}}
            >
                <Masonry>
                    <ChildA />
                    <ChildB />
                    {/* Children */}
                    <ChildY />
                    <ChildZ />
                </Masonry>
            </ResponsiveMasonry>
        )
    }
}
```

--------------------------------

### Usage with className and style

Source: https://context7.com/cedricdelpoux/react-responsive-masonry/llms.txt

Illustrates applying custom CSS classes and inline styles to the wrapper element rendered by ResponsiveMasonry.

```APIDOC
## Usage with className and style

### Description
This example demonstrates how to apply a custom CSS class and inline styles directly to the `ResponsiveMasonry` component's root element, allowing for easier styling and integration into existing layouts.

### Code
```jsx
import React from "react"
import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"

const images = [
  "https://picsum.photos/200/300",
  "https://picsum.photos/400/400",
  "https://picsum.photos/400/300",
  "https://picsum.photos/200/200",
  "https://picsum.photos/500/400",
  "https://picsum.photos/400/500",
  "https://picsum.photos/200/300",
  "https://picsum.photos/300/300",
  "https://picsum.photos/300/300",
]

const StyledGallery = () => (
  <ResponsiveMasonry
    columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
    className="gallery-wrapper"
    style={{maxWidth: 1200, margin: "0 auto"}}
  >
    <Masonry gutter="16px">
      {images.map((src, i) => (
        <div key={i} style={{border: "1px solid #eee", borderRadius: 8, overflow: "hidden"}}>
          <img src={src} alt="" style={{width: "100%", display: "block"}} />
        </div>
      ))}
    </Masonry>
  </ResponsiveMasonry>
)
```
```

--------------------------------

### ResponsiveMasonry Component

Source: https://context7.com/cedricdelpoux/react-responsive-masonry/llms.txt

The ResponsiveMasonry component acts as a wrapper that tracks window width and applies breakpoint-driven column counts and gutters to its child Masonry component. It's SSR-safe, utilizing appropriate lifecycle methods for browser and server environments.

```APIDOC
## ResponsiveMasonry Component

### Description
A functional component that tracks `window.innerWidth` and computes the correct `columnsCount` and `gutter` from breakpoint maps. It clones the child `<Masonry>` element and injects the computed values as props. SSR-safe: uses `useLayoutEffect` in the browser and `useEffect` on the server.

### Props

| Prop                      | Type   | Default                  | Description                                                    |
|---------------------------|--------|--------------------------|----------------------------------------------------------------|
| `columnsCountBreakPoints`  | object | `{350: 1, 750: 2, 900: 3}` | Map of `minWidth → columnCount`. Sorted ascending; highest matching breakpoint wins. |
| `gutterBreakPoints`        | object | `{}`                     | Map of `minWidth → gutter string`. Same selection logic as columns. |
| `className`               | string | `null`                   | CSS class applied to the `<div>` wrapper rendered by `ResponsiveMasonry`. |
| `style`                   | object | `null`                   | Inline styles for the `<div>` wrapper.                         |
```

--------------------------------

### Static Masonry Layout

Source: https://github.com/cedricdelpoux/react-responsive-masonry/blob/master/README.md

Use the Masonry component directly for a static layout where the number of columns does not change with window resizing. Specify the desired number of columns using the 'columnsCount' prop.

```javascript
import React from "react"
import Masonry from "react-responsive-masonry"

// The number of columns and the gutter don't change by resizing the window
class MyWrapper extends Component {
    render() {
        return (
            <Masonry columnsCount={3}>
                <ChildA />
                <ChildB />
                {/* Children */}
                <ChildY />
                <ChildZ />
            </Masonry>
        )
    }
}
```

--------------------------------

### ResponsiveMasonry Component Props

Source: https://github.com/cedricdelpoux/react-responsive-masonry/blob/master/README.md

Props available for the ResponsiveMasonry component. This component dynamically adjusts the Masonry layout based on screen size.

```APIDOC
## ResponsiveMasonry Component

### Description
Wraps the Masonry component to enable responsive column and gutter adjustments based on window resizing.

### Props

| Name                    | PropType | Description                                                                              |
| ----------------------- | -------- | ---------------------------------------------------------------------------------------- |
| columnsCountBreakPoints | Object   | Keys are breakpoints in px, values are the columns number (e.g., `{350: 1, 750: 2, 900: 3}`). |
| gutterBreakPoints       | Object   | Keys are breakpoints in px, values are the gutter value (e.g., `{350: "12px", 750: "16px"}`). |
```

--------------------------------

### <Masonry> Component

Source: https://context7.com/cedricdelpoux/react-responsive-masonry/llms.txt

The Masonry component renders children into a fixed number of flexbox columns. It automatically balances column heights after the initial render by redistributing items based on their measured heights. Layout is achieved using inline flexbox styles.

```APIDOC
## <Masonry>

### Description
Renders children into a fixed number of flexbox columns. On first render children are distributed equally; after mount the component measures actual heights and redistributes items to balance column heights. All layout is done with inline flexbox styles — no external CSS is required.

### Props

- **`columnsCount`** (number) - Default: `3` - Number of columns. Injected automatically by `ResponsiveMasonry`.
- **`gutter`** (string) - Default: `"0"` - CSS gap between items, e.g. `"10px"` or `"1.5rem"`.
- **`className`** (string) - Default: `null` - CSS class added to the outer container.
- **`style`** (object) - Default: `{}` - Inline styles for the outer container element.
- **`containerTag`** (string) - Default: `"div"` - HTML tag used for the outer container.
- **`itemTag`** (string) - Default: `"div"` - HTML tag used for each column element.
- **`itemStyle`** (object) - Default: `{}` - Inline styles applied to every column element.
- **`sequential`** (boolean) - Default: `false` - If `true`, skip height-based redistribution; place items in source order.
```

--------------------------------

### Masonry Component Props

Source: https://github.com/cedricdelpoux/react-responsive-masonry/blob/master/README.md

Props available for the Masonry component. This component arranges items in a masonry layout.

```APIDOC
## Masonry Component

### Description
Arranges items in a masonry layout. Can be used standalone or within ResponsiveMasonry.

### Props

| Name         | PropType | Description                                          | Default |
| ------------ | -------- | ---------------------------------------------------- | ------- |
| columnsCount | Number   | Number of columns. Injected by ResponsiveMasonry.    | 3       |
| gutter       | String   | Margin surrounding each item (e.g., "10px").        | "0"     |
| className    | String   | Custom CSS class applied to the container element.   | null    |
| style        | Object   | Style object for customizing the container element.  | {}      |
| containerTag | String   | Tag name of the container element.                   | "div"   |
| itemTag      | String   | Tag name of the item element.                        | "div"   |
| itemStyle    | Object   | Style object applied to each item.                   | {}      |
| sequential   | Boolean  | If true, items are placed in the order they are passed. | false   |
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.