中文 | 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>
);
}
Apache-2.0 © MinJieLiu