react-columns

react-columns

React component for rendering columns from a list of children with horizontal ordering

Demo

http://novascreen.github.io/react-columns/

Usage

Simply pass a list of nodes to the <Columns> component and either set a fixed number of columns or pass in a set of media queries for it to respond to. If you know the dimensions of your nodes upfront you can pass those in as a separate property and Columns will fill up the columns more intelligently by looping through the nodes and always adding it to the shortest column.

Using fixed number of columns

var Columns = require('react-columns');
function Component(){
  return (
  <Columns columns="5">
    <img src="http://placehold.it/800x1200?text=1" alt="">
    <img src="http://placehold.it/800x600?text=2" alt="">
    <img src="http://placehold.it/800x800?text=3" alt="">
    <img src="http://placehold.it/800x600?text=4" alt="">
    <img src="http://placehold.it/800x1200?text=5" alt="">
    <img src="http://placehold.it/800x600?text=6" alt="">
    <img src="http://placehold.it/800x400?text=7" alt="">
    <img src="http://placehold.it/800x400?text=8" alt="">
    <img src="http://placehold.it/800x400?text=9" alt="">
    <img src="http://placehold.it/800x800?text=10" alt="">
  </Columns>
  );
}

Using media queries to adjust the amount of columns

var Columns = require('react-columns');
function Component(){
  var queries = [{
    columns: 2,
    query: 'min-width: 500px'
  }, {
    columns: 3,
    query: 'min-width: 1000px'
  }];
  return (
  <Columns queries={queries}>
    <img src="http://placehold.it/800x1200?text=1" alt="">
    <img src="http://placehold.it/800x600?text=2" alt="">
    <img src="http://placehold.it/800x800?text=3" alt="">
    <img src="http://placehold.it/800x600?text=4" alt="">
    <img src="http://placehold.it/800x1200?text=5" alt="">
    <img src="http://placehold.it/800x600?text=6" alt="">
    <img src="http://placehold.it/800x400?text=7" alt="">
    <img src="http://placehold.it/800x400?text=8" alt="">
    <img src="http://placehold.it/800x400?text=9" alt="">
    <img src="http://placehold.it/800x800?text=10" alt="">
  </Columns>
  );
}

Using dimensions for more intelligent ordering

var Columns = require('react-columns');
function Component(){
  var dimensions = [
    { width:800, height: 1200 },
    { width: 800, height: 600 },
    { width: 800, height: 800 },
    { width: 800, height: 600 },
    { width: 800, height: 1200 },
    { width: 800, height: 600 },
    { width: 800, height: 400 },
    { width: 800, height: 400 },
    { width: 800, height: 400 },
    { width: 800, height: 800 },
  ];
  return (
  <Columns dimensions={dimensions}>
    <img src="http://placehold.it/800x1200?text=1" alt="">
    <img src="http://placehold.it/800x600?text=2" alt="">
    <img src="http://placehold.it/800x800?text=3" alt="">
    <img src="http://placehold.it/800x600?text=4" alt="">
    <img src="http://placehold.it/800x1200?text=5" alt="">
    <img src="http://placehold.it/800x600?text=6" alt="">
    <img src="http://placehold.it/800x400?text=7" alt="">
    <img src="http://placehold.it/800x400?text=8" alt="">
    <img src="http://placehold.it/800x400?text=9" alt="">
    <img src="http://placehold.it/800x800?text=10" alt="">
  </Columns>
  );
}

Properties

• columns {Number} (default: 3)

  Sets the amount of columns statically.

• queries {Array} (default: [])

  Takes an array of objects defining how many columns should be used when a specific media query matches. The last matching media query will be used, just like when you're writing CSS.

  • queries[].query {String}

    A media query or shortened single rule media query like min-width: 500px

  • queries[].columns {Number}

    Number of columns

• dimensions {Array} (default: [])

  List of dimensions corresponding to the child nodes passed into the component Columns calculates the aspect ratio and uses that to determine the relative heights of the nodes and columns. If you're dealing with images you can pass in the original size of the image.

  • dimensions[].width {Number}

    The width of node

  • dimensions[].width {Number}

    The height of the node

• gap {String} (default: 0)

  Gap between columns as number or string with unit.

Changelog

v0.1.0 (April 10, 2016)

First public release.