eco-react-image-viewer

eco-react-image-viewer

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

查看文档和示例

使用

npm 或 yarn 安装

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

or

yarn add eco-react-image-viewer

示例

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