# react-columns

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

Latest version **1.2.1** (published 2019-05-26) · MIT license · 398 weekly downloads

## Install

```sh
npm install react-columns
pnpm add react-columns
yarn add react-columns
bun add react-columns
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2019-05-26 |
| First published | 2016-04-11 |
| Weekly downloads | 398 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 62.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Thomas Hermann |
| Maintainers | novascreen |
| Keywords | react-component, columns, media, query, queries, masonry |

## Links

- npm: https://www.npmjs.com/package/react-columns
- Repository: https://github.com/novascreen/react-columns
- Homepage: http://novascreen.github.io/react-columns/
- Issues: https://github.com/novascreen/react-columns/issues
- npm.io page: https://npm.io/package/react-columns

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2019-05-26
- 1.2.0 — 2018-03-17
- 1.1.0 — 2017-09-10
- 1.0.2 — 2017-02-09
- 1.0.1 — 2017-01-07
- 1.0.0 — 2017-01-07
- 0.2.2 — 2016-05-30
- 0.2.1 — 2016-04-30
- 0.2.0 — 2016-04-30
- 0.1.2 — 2016-04-12
- 0.1.1 — 2016-04-11
- 0.1.0 — 2016-04-11

## README

# react-columns

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

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

[build-badge]: https://img.shields.io/travis/novascreen/react-columns/master.svg?style=flat-square
[build]: https://travis-ci.org/novascreen/react-columns

[npm-badge]: https://img.shields.io/npm/v/react-columns.svg?style=flat-square
[npm]: https://www.npmjs.org/package/react-columns

[coveralls-badge]: https://img.shields.io/coveralls/novascreen/react-columns/master.svg?style=flat-square
[coveralls]: https://coveralls.io/github/novascreen/react-columns
 
## Installation

`npm install --save react-columns`

## Features

* Static number of columns
* Dynamic number of columns based on media queries ([matchMedia][matchmedia])
* Height aware ordering of items
* Put gap between columns

## Demo

See this [component in action][demo]

![](https://i.gyazo.com/9a59c888c472388d8de14dbc4391db7e.gif)

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

```jsx
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

```jsx
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

```jsx
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

* `className`  `{String}` (default: `''`)

  Lets you pass in a class for the most outer element of the component.

* `rootStyles`  `{Object}` (default: `{ overflowX: 'hidden' }`)

  Styles applied to the most outer element. This avoids horizontal scrolling when using `gap` since the negative margin technique is used to create the gaps. You might want to remove this and handle it at a node higher up in the DOM tree.

* `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[].height` `{Number}`

    The height of the node

* `gap`  `{String}` (default: `0px`)

  Gap between columns as number or string with unit.

## License

MIT

[matchmedia]: http://caniuse.com/#feat=matchmedia
[demo]: http://novascreen.github.io/react-columns/

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