# react-column-gallery

> An React Column Gallery in react.

Latest version **0.1.0** (published 2022-12-28) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-12-28 |
| First published | 2022-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 70.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | hc |
| Maintainers | hcnpm |
| Keywords | react, gallery, column-gallery, masonry-gallery, image-gallery |

## Links

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

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2022-12-28
- 0.0.9 — 2022-12-28
- 0.0.8 — 2022-12-23
- 0.0.7 — 2022-12-23
- 0.0.6 — 2022-12-23
- 0.0.5 — 2022-12-23
- 0.0.4 — 2022-12-23
- 0.0.3 — 2022-12-20
- 0.0.2 — 2022-12-20
- 0.0.1 — 2022-12-20

## README

# React Column Gallery

- 响应式可定制的图片展示组件
- 保持图片宽高比
- 自定义底部内容
- SSR支持

## Preview

![效果图](https://github.com/babyhzz/react-column-gallery/blob/ed7320a49e826081eb2b1991320a73d7394210ed/images/react-column-gallery.gif)

## Installation

```
yarn add react-column-gallery	
or
npm install react-column-gallery
```

## Minimal Setup Example

```js
const photos = [
  {
    src: 'http://example.com/example/img1.jpg',
    width: 4,
    height: 3
  },
  {
    src: 'http://example.com/example/img2.jpg',
    width: 1,
    height: 1
  }
];

<Gallery photos={photos} />;
```

## API Documentation

可以查看 `index.d.ts` 查看具体的定义

| 属性                  | 类型                                                         | 默认值    | 描述                                                         |
| :-------------------- | :----------------------------------------------------------- | :-------- | :----------------------------------------------------------- |
| photos                | array                                                        | undefined | 一个Photo的数组，每一个项Photo的定义查看下面。               |
| columns               | number or function                                           | -         | 可选；列的数目或一个返回列数量的函数，参数为容器的宽度。若不设置，将使用内部的断点进行列的自适应变化。 |
| spacing               | number or { horizontal: number, vertical: number } or function | -         | 可选的；用于设置横向和纵向的间距。                           |
| initialContainerWidth | number                                                       | 0         | 可选的；初始的容器宽度，用于SSR。                            |
| renderPhoto           | function                                                     | undefined | 可选的；用于自定义图片渲染。                                 |
| footerHeight          | number                                                       | 0         | 可选的；图片底部内容高度，用于增加图片渲染额外信息。         |
| renderFooter          | function                                                     | undefined | 可选的；用于渲染底部内容。                                   |

### Photo每一项属性定义

| 属性    | 类型              | 默认值    | 描述                                                         |
| :------ | :---------------- | :-------- | :----------------------------------------------------------- |
| key     | string or number  | src       | 可选；组件中使用，确保列表内唯一。                           |
| src     | string            | undefined | 必传；图像地址。                                             |
| width   | number            | undefined | 必传;；图像的宽度（用于计算宽高比，可以不是真实值，但宽高比必须和原图一致）。 |
| height  | number            | undefined | 必传；图像的高度（用于计算宽高比，可以不是真实值，但宽高比必须和原图一致）。 |
| alt     | string            | undefined | 可选；图像的alt文本。                                        |
| loading | "lazy" or "eager" | "eager"   | 可选；用于设置 img 的loading 属性。                          |

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