# eco-react-image-viewer

> 基于react的图片预览组件，兼容PC、移动端

Latest version **0.0.10** (published 2022-01-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install eco-react-image-viewer
pnpm add eco-react-image-viewer
yarn add eco-react-image-viewer
bun add eco-react-image-viewer
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2022-01-01 |
| First published | 2021-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 64.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kaiyu.kong |

## Links

- npm: https://www.npmjs.com/package/eco-react-image-viewer
- Repository: https://github.com/Yicoding/eco-react-image-viewer
- Homepage: https://github.com/Yicoding/eco-react-image-viewer#readme
- Issues: https://github.com/Yicoding/eco-react-image-viewer/issues
- npm.io page: https://npm.io/package/eco-react-image-viewer

## Dependencies (3)

- [any-touch](https://npm.io/package/any-touch.md) ^2.0.0-alpha.4
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.16.3

## Recent versions

- 0.0.10 (latest) — 2022-01-01
- 0.0.9 — 2021-12-21
- 0.0.8 — 2021-12-21
- 0.0.7 — 2021-12-21
- 0.0.6 — 2021-12-21
- 0.0.5 — 2021-12-20
- 0.0.3 — 2021-12-20
- 0.0.2 — 2021-12-20
- 0.0.1 — 2021-12-20

## README

# eco-react-image-viewer

[![npm][npm]][npm-url] ![GitHub](https://shopmushi.com/configFile/assets/mit.svg)

基于`react`的图片预览组件，兼容 PC、移动端

[查看文档和示例][site]

## 使用

### npm 或 yarn 安装

```bash
npm install eco-react-image-viewer --save
```

or

```bash
yarn add eco-react-image-viewer
```

### 示例

```ts
import React, { useState } from 'react';
import ImageViewer from 'eco-react-image-viewer';

import aLg from '../../fixtures/images/a-lg.png';
import aMd from '../../fixtures/images/a-md.png';
import xLg from '../../fixtures/images/x-lg.png';
import xMd from '../../fixtures/images/x-md.png';
import yLg from '../../fixtures/images/y-lg.png';
import yMd from '../../fixtures/images/y-md.png';

export default () => {
  const [visible, setVisible] = useState<boolean>(false);
  const [index, setIndex] = useState<number>(0);

  const onClose = () => setVisible((val) => !val);

  return (
    <div>
      <div onClick={onClose}>预览</div>
      <ImageViewer
        visible={visible}
        urls={[aLg, aMd, xLg, xMd, yLg, yMd]}
        onClose={onClose}
        index={index}
        onIndexChange={setIndex}
      />
    </div>
  );
};
```

### API

| 属性          | 说明               | 类型                    | 默认值  |
| :------------ | :----------------- | :---------------------- | :------ |
| urls          | 图片数组           | `string[]`              | `[]`    |
| visible       | 控制显示/隐藏      | `boolean`               | `false` |
| onClose       | 关闭预览回调       | `() => void`            | -       |
| index         | 当前展示图片的下标 | `number`                | `0`     |
| onIndexChange | 图片切换回调       | `(val: number) => void` | -       |

[npm]: https://img.shields.io/npm/v/eco-react-image-viewer.svg
[npm-url]: https://www.npmjs.com/package/eco-react-image-viewer
[site]: https://yicoding.github.io/eco-react-image-viewer

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