No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
lib
src
.npmignore
README.md
package-lock.json
package.json
webpack.config.js

README.md

React-Column-Layout

This React component will allow you to render photos of potentially varying heights in a column-based layout.

Installation

npm install --save react-column-layout

Features

A dynamic number of columns designed to fit the screen. Media queries and breakpoints not needed!

  • Images automatically and intelligently resize as screen size adjusts.
  • Customizable margins and gutters (space between images).
  • Specifiable minimum and maximum image widths.

Demo

Try resizing the page

Demo

Usage

const photos = [
  {
    thumbnailSrc: "http://lorempixel.com/400/1000",
    thumbnailWidth: 400,
    thumbnailHeight: 1000
  },
  {
    thumbnailSrc: "http://lorempixel.com/400/200",
    thumbnailWidth: 400,
    thumbnailHeight: 200
  },
  {
    thumbnailSrc: "http://lorempixel.com/400/200",
    thumbnailWidth: 400,
    thumbnailHeight: 200
  }
];

class Demo extends Component {
  render() {
    return <ColumnLayout columnMinWidth={300} margin={15} gutter={2} photos={photos} />;
  }
}