react-photo-view

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

Usage no npm install needed!

<script type="module">
  import reactPhotoView from 'https://cdn.skypack.dev/react-photo-view';
</script>

README

react-photo-view

一款超精致的图片预览方案

NPM version Downloads Minified size Gzip size

快速开始

特性

  1. 拖动切换预览
  2. 物理减速
  3. 双击放大/缩小
  4. 双指放大/缩小/平移
  5. 左右切换导航
  6. 上/下滑关闭
  7. 键盘导航
  8. 旋转 API
  9. 点击切换控件
  10. 缩放动画
  11. 自适应图像适应
  12. 长图模式
  13. 自定义元素预览
  14. 支持桌面端（兼容 IE10+）/移动端
  15. 基于 typescript
  16. 6KB
  17. 无依赖
  18. 支持服务端渲染
  19. 高扩展性
  20. 更多...

安装

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