react-photo-view

中文 | English

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

快速开始

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

特性

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

安装

yarn add react-photo-view

基本使用:

import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function App() {
  return (
    <PhotoProvider>
      <PhotoView src="https://github.com/MinJieLiu/react-photo-view/raw/v1.2.1/1.jpg">
        <img src="https://github.com/MinJieLiu/react-photo-view/raw/v1.2.1/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

License

Apache-2.0 © MinJieLiu