# react-masonry-responsive

> A lightweight, responsive masonry layout for React, with a simple interface and server-side rendering support.

Latest version **2.1.2** (published 2019-01-14) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install react-masonry-responsive
pnpm add react-masonry-responsive
yarn add react-masonry-responsive
bun add react-masonry-responsive
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2019-01-14 |
| First published | 2018-05-01 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | Benjamin Humphrey |
| Maintainers | bradley.ayers, humphreybc, releasebot-dovetail |

## Links

- npm: https://www.npmjs.com/package/react-masonry-responsive
- Repository: https://github.com/heydovetail/react-masonry-responsive
- Issues: https://github.com/heydovetail/react-masonry-responsive/issues
- npm.io page: https://npm.io/package/react-masonry-responsive

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^1.8.1
- [react-resize-detector](https://npm.io/package/react-resize-detector.md) ^1.1.0

## Recent versions

- 2.1.2 (latest) — 2019-01-14
- 2.1.1 — 2018-08-01
- 2.1.0 — 2018-08-01
- 2.0.4 — 2018-07-13
- 2.0.1 — 2018-07-10
- 2.0.0 — 2018-07-08
- 1.0.7 — 2018-06-22
- 1.0.6 — 2018-06-08
- 1.0.5 — 2018-05-22
- 1.0.4 — 2018-05-01
- 1.0.3 — 2018-05-01
- 1.0.2 — 2018-05-01

## README

# react-masonry-responsive

A lightweight, performant, and responsive masonry layout for React.

![Demo of react-masonry-responsive](https://raw.githubusercontent.com/heydovetail/react-masonry-responsive/master/img/demo.gif)

## Features

* Satisfies the masonry requirements laid out in [this article](https://regisphilibert.com/blog/2017/12/pure-css-masonry-layout-with-flexbox-grid-columns-in-2018/)
* Easy-to-use interface – pass items along with desired column width
* Fully responsive column width and column count based on container size
* Full-bleed columns – no extra gutter on the left and right
* Server-side render support for frameworks like [Gatsby](https://www.gatsbyjs.org/)
* Small library with two dependencies
* No cheesy baked-in animations

## Installation

### Yarn

```bash
yarn add react-masonry-responsive
```

### NPM

```bash
npm i react-masonry-responsive
```

## Example implementation

```jsx
import { Masonry, MasonryItem } from "react-masonry-responsive"
import * as React from "react";

function SimpleExample(props: (items: MasonryItem)) {
  return (
    <Masonry
      items={props.items}
      minColumnWidth={128}
    />
  );
}

function AdvancedExample(props: (items: MasonryItem)) {
  return (
    <div style={{maxWidth: 800}}>
      <Masonry
        containerWidth={800}
        gap={16}
        items={props.items}
        minColumnWidth={128}
      />
    </div>
  );
}
```

## Props

Items are an array of objects with a unique key and a React node. Ideally, the key would be something like a UUID.

```jsx
export interface MasonryItem {
  key: string | number;
  node: React.ReactNode;
}

export interface Props {
  // Optional. Used for server-side rendering when there’s
  // no access to the DOM to determine the container width with JS.
  // Pass this through for server-side rendering support.
  containerWidth?: number;

  // Optional gap between items, both horizontally and vertically.
  // Defaults to 32px.
  gap?: number;

  // An array of items to render in the masonry layout. Each item
  // should be an object a unique key and a node (React component).
  items: MasonryItem[];

  // The desired width for each column in the masonry layout. When columns
  // go below this width, the number of columns will reduce.
  minColumnWidth: number;
}
```

## Build status

[![CircleCI](https://circleci.com/gh/heydovetail/react-masonry-responsive.svg?style=svg)](https://circleci.com/gh/heydovetail/react-masonry-responsive)

---
_Source: https://npm.io/package/react-masonry-responsive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._