# react-column-layout

> A react component to vertically layout images

Latest version **1.0.7** (published 2017-10-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-column-layout
pnpm add react-column-layout
yarn add react-column-layout
bun add react-column-layout
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2017-10-20 |
| First published | 2017-10-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Nick Drane |
| Maintainers | ndrane |
| Keywords | react, column, columns, media, query, queries, masonry, pinterest, image, grid, gallery |

## Links

- npm: https://www.npmjs.com/package/react-column-layout
- Repository: https://github.com/nadrane/react-column-layout
- Homepage: https://nadrane.github.io/react-column-layout/
- Issues: https://github.com/nadrane/react-column-layout/issues
- npm.io page: https://npm.io/package/react-column-layout

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^15.6.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.6.1

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2017-10-20
- 1.0.6 — 2017-10-20
- 1.0.5 — 2017-10-19
- 1.0.4 — 2017-10-19
- 1.0.3 — 2017-10-19
- 1.0.2 — 2017-10-19
- 1.0.1 — 2017-10-19
- 1.0.0 — 2017-10-19

## README

# 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](https://nadrane.github.io/react-column-layout/)

# Usage
```js
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} />;
  }
}
```

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