README.zh-CN.md

此仓库 fork 自 https://github.com/MinJieLiu/react-photo-view

由于 react-photo-view 的更新不再及时，所以创建此仓库。

此仓库更新的内容可以看这个 pr MinJieLiu/react-photo-view#140

react-image-previewer

中文 | English

一款超精致的图片预览组件

快速开始

• 文档入口
• 基本示例
• API
• 更新日志

特性

• 支持触摸手势，拖动/平移/物理效果滑动，双指指定位置放大/缩小
• 全方面动画衔接，打开/关闭/回弹/触边，顺其自然的交互效果
• 图像自适应，以一个合适的最初呈现大小，并根据调整自适应
• 支持自定义如 <video /> 或任意 HTML 元素的预览
• 键盘导航，drag模式支持视图内自由拖拽，按图片大小缩放，完美适配桌面端
• 支持自定义节点扩展，轻松实现全屏预览、旋转控制、图片介绍以及更多功能
• 工具栏UI组件分离，支持自定义工具栏
• 基于 typescript，支持服务端渲染
• 简单易用的 API，上手零成本

安装

yarn add react-image-previewer

基本使用:

import { PhotoProvider, PhotoView } from 'react-image-previewer';

function App() {
  return (
    <PhotoProvider>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

使用内置工具栏:

import { PhotoProvider, PhotoView } from 'react-image-previewer';
import { SlideToolbar, CloseButton } from 'react-image-previewer/ui';

function App() {
  return (
    <PhotoProvider overlayRender={props => {
        const { onClose } = props
        return (
          <>
            <SlideToolbar {...props} />
            <CloseButton onClick={onClose} />
          </>
        )
      }}>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

License

Apache-2.0 © MinJieLiu