react-image-previewer

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

触摸手势

反馈动画

图像自适应

自定义元素

键盘导航

基于 TypeScript

轻量体积

概览

import { PhotoProvider, PhotoView } from 'react-image-previewer';
 
function App() {
  return (
    <PhotoProvider>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

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

💡

注意：基本使用不会携带任何工具栏UI和按钮。

工具栏相关UI

react-image-previewer 提供了两套完整的工具栏UI组件，可以通过 react-image-previewer/ui 导入。

使用 overlayRender 属性可以渲染任意的覆盖物。例如，我们可以使用 SlideToolbar 和 CloseButton 来实现一个简单的工具栏。

更多UI配置

import { PhotoProvider, PhotoView } from 'react-image-previewer';
import { SlideToolbar, CloseButton } from 'react-image-previewer/ui';
 
function App() {
  return (
    <PhotoProvider overlayRender={props => {
        const { onClose } = props
        return (
          <>
            <SlideToolbar {...props} />
            <CloseButton onClick={onClose} />
          </>
        )
      }}>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}