项目
在 GitHub 查看
MinJieLiu/react-photo-view
MinJieLiu/react-photo-view has 1,895 GitHub stars and 149 forks. GitHot measured 0 stars in 24 hours and 0 in 7 days. Last checked 2026-11-11 14:13 UTC. Last push 2026-01-30.
An exquisite React photo preview component.
可以做什么
- Support touch gestures, drag and pan physical effect sliding, two-finger specified position to zoom in and out
- All aspects of animation connection, open and close the rebound touch edge, let the natural interaction effect
- The image is adaptive, with a suitable initial rendering size, and adapts according to the adjustment
- Support for custom previews like <video> or any HTML element
实测星标增长
- 24小时
- 0
- 7天
- 0
- 15天
- 更新延迟
- 1个月
- 更新延迟
各周期内的星标净变化，周期相互重叠，并非每日新增。缺失的测量保持空白。星标代表关注度，不代表软件质量。
README.zh-CN.md
原文react-photo-view
中文 | English
一款超精致的图片预览组件
快速开始
特性
- 支持触摸手势，拖动/平移/物理效果滑动，双指指定位置放大/缩小
- 全方面动画衔接，打开/关闭/回弹/触边，顺其自然的交互效果
- 图像自适应，以一个合适的最初呈现大小，并根据调整自适应
- 支持自定义如
<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="/1.jpg">
<img src="/1-thumbnail.jpg" alt="" />
</PhotoView>
</PhotoProvider>
);
}
License
Apache-2.0 © MinJieLiu