React Responsive Bricks

A responsive masonry layout for React

Live Demo

Installation

#NPM
npm i --save react-responsive-bricks

#Yarn
yarn add react-responsive-bricks

Usage

import React from "react";
import { Bricks } from "react-responsive-bricks";

//...

let data = [
  {
    imSrc: "link to image"
  },
  {
    imSrc: "link to image"
  },
  {
    imSrc: "link to image"
  },
]

//...

<Bricks data={data} />

Props

Prop	Type	Default	Description
data	Array		Array of objects in the form {imgSrc: "link to img"}. Required
columns	Number	4	How many columns to show. Minimum of 1. Has built in logic for responsiveness.
gap	Number	0	Gap (in pixels) between elements. Minimum of 0
minWidth	Number	200	Minimum width (in pixels) of each element. Determines wrapping of elements based on width of the browser.
backgroundColor	String	white	Background color of the grid. Only seen if gap is more than 0. Supports named colors (e.g. white, red, black, etc) or hex values (e.g. #ffffff)

Todo

This is my list of features I plan to implement in the near future. If you have any ideas reach out!

• onClick for each element
• Support for cards as well as images
• Add more mouseover features