react-photo-view

react-photo-view 拥有无与伦比的预览交互体验：从打开图像开始，每一帧的动画、细节和交互都经过了精心设计与反复调试，媲美原生图片预览的效果。

概览

import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';
 
export default function App() {
  return (
    <PhotoProvider>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

该示例中，react-photo-view 提供了两个组件： PhotoProvider 和 PhotoView。以 PhotoProvider为界限，里面所有的 PhotoView 图片会按照运行顺序提取为一组图片预览画廊。当某个 <img /> 被点击，则会定位到指定的图片并打开预览。

特性

它拥有非常完善的细节与特性：

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

关于

react-photo-view 由 MinJieLiu (opens in a new tab) 创建

• 稀土掘金 (opens in a new tab)
• 知乎 (opens in a new tab)
• GitHub (opens in a new tab)
• Gitee (opens in a new tab)

加我好友，拉你进前端交流进阶大群（备注：加群）

License

Apache-2.0 © MinJieLiu (opens in a new tab)