react-masonry-responsive

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

Status

⚠️Deprecated

Unfortunately we don’t have time to maintain this library at the moment so we have archived it. We may return to this in the future. In the meantime, the latest working version is still available on NPM.

Features

Satisfies the masonry requirements laid out in this article
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
Small library with two dependencies
No cheesy baked-in animations

Installation

Yarn

yarn add react-masonry-responsive

NPM

npm i react-masonry-responsive

Example implementation

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.

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;

  // Optional. Equalize the height of items on each row.
  equalHeight?: boolean;

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

License

heydovetail/react-masonry-responsive

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 4

Uh oh!

Languages

Error
Looks like something went wrong!

Packages