一款超精致的 React 图片预览组件
触摸手势
反馈动画
图像自适应
自定义元素
键盘导航
基于 TypeScript
轻量体积
更多…
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)
Last updated on 2023年12月26日