**React-Viewer 技术文档**

React-Viewer 技术文档

react-viewer react image viewer, supports rotation, scale, zoom and so on 项目地址: https://gitcode.com/gh_mirrors/re/react-viewer

React-Viewer 是一个专为 React 应用设计的图像查看器组件，旨在提供更加流畅的用户体验，特别是在与 ViewerJS 在 React 中集成不顺畅时，作为替代方案。本文档将指导您从安装到应用的基本使用，以及详细配置 API。

安装指南

确保您的项目支持 React 16.8.0 及以上版本，包括对应的 React DOM。之后，通过 npm 执行以下命令来安装 React-Viewer：

npm install react-viewer --save

这会将 React-Viewer 添加到您的项目依赖中。

项目使用说明

基础使用

在需要使用图像查看功能的 React 组件中，首先导入 React-Viewer：

import React, { useState } from 'react';
import Viewer from 'react-viewer';

function App() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setVisible(true)}>显示查看器</button>
      <Viewer
        visible={visible}
        onClose={() => setVisible(false)}
        images={[{ src: 'your-image-url', alt: '图片描述' }]}
      />
    </div>
  );
}

Next.js 环境下的服务器端渲染（SSR）

请注意，当前版本（3.x）不支持完全的服务器端渲染（SSR），但在 4.0 版本中预计将得到解决。如果您正使用 Next.js，可以采用按需加载动态导入的方式，并设置 ssr: false 来避免 SSR 预渲染的问题：

import dynamic from 'next/dynamic';

const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false });

// 在您的组件中使用
<ReactViewer ... />

项目API使用文档

React-Viewer 提供了丰富灵活的属性来定制您的图像查看体验。

必需属性

• visible: 控制查看器是否可见，类型为布尔值。
• onClose: 当关闭查看器时触发的回调函数。
• images: 图片源数组，每个元素包含 src 和可选的 alt 描述。

主要可选属性

• zIndex: 查看器的 CSS z-index，默认为 1000。
• drag: 是否允许拖动图片，默认开启。
• zoomable, rotatable, scalable: 分别控制缩放、旋转和缩放按钮的显示，默认均为开启状态。
• onChange: 图片切换时的回调。

更多高级属性

还包括自定义工具栏、键盘支持开关、下载选项等，具体见官方 README 文件中的 Props 列表。

项目安装方式

实际上，安装方式已在“安装指南”部分覆盖，通过 npm 或 yarn 引入库即可。

---

以上就是 React-Viewer 的基本介绍和技术文档概览。利用这些信息，您可以有效地集成这个强大的图像查看器到您的 React 应用中。对于更详细的使用案例和属性配置，请参考项目在 GitHub 上的完整 README 文件。

react-viewer react image viewer, supports rotation, scale, zoom and so on 项目地址: https://gitcode.com/gh_mirrors/re/react-viewer