Watch 1 Star 3 Fork 0

MinJieLiu / react-photo-viewTypeScriptMIT

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
一款精致的 React 的图片预览组件,支持左右切换导航、上/下滑关闭、双击放大/缩小、双指放大/缩小/平移、键盘导航/关闭、点击切换控件 spread retract

http://minjieliu.gitee.io/react-photo-view

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

react-photo-view

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

npm npm

Demo: https://minjieliu.github.io/react-photo-view

特性

  1. 支持左右切换导航、上/下滑关闭、双击放大/缩小、双指放大/缩小/平移、键盘导航/关闭、点击切换控件等
  2. 打开/关闭缩放动画
  3. 自适应图像适应
  4. 支持桌面端(兼容 IE10+)/移动端
  5. 轻量的体积
  6. 高度的扩展性
  7. 支持服务端渲染
  8. 基于 typescript 友好的语法提示

开始使用

yarn add react-photo-view

基本:

import { PhotoProvider, PhotoConsumer } from 'react-photo-view';
import 'react-photo-view/dist/index.css';

function ImageView() {
  return (
    <PhotoProvider>
      {photoImages.map((item, index) => (
        <PhotoConsumer key={index} src={item} intro={item}>
          <img src={item} alt="" />
        </PhotoConsumer>
      ))}
    </PhotoProvider>
  );
}

受控 PhotoSlider

function ImageView() {
  const [visible, setVisible] = React.useState(false);
  const [photoIndex, setPhotoIndex] = React.useState(0);

  return (
    <div>
      <Button onClick={() => setVisible(true)}>打开</Button>
      <PhotoSlider
        images={photoImages.map(item => ({ src: item }))}
        visible={visible}
        onClose={() => setVisible(false)}
        index={photoIndex}
        onIndexChange={setPhotoIndex}
      />
    </div>
  );
}

API

PhotoProvider

名称 类型 必选 描述
children React.ReactNode
maskClosable boolean 背景可点击关闭,默认 true
photoClosable boolean 图片点击可关闭,默认 false
bannerVisible boolean 导航条 visible,默认 true
introVisible boolean 简介 visible,默认 true
overlayRender (overlayProps) => React.ReactNode 自定义渲染
className string className
maskClassName string 遮罩 className
viewClassName string 图片容器 className
imageClassName string 图片 className
loadingElement JSX.Element 自定义 loading
brokenElement JSX.Element 加载失败 Element

PhotoConsumer

名称 类型 必选 描述
src string 图片地址
intro React.ReactNode 图片介绍
children React.ReactElement

注意:若 PhotoConsumerchildren 为自定义组件

  1. 需要向外部参数暴露 React.HTMLAttributes
  2. 展开/关闭动画精准位置则需要用 React.forwardRef 暴露内部 React.ReactHTMLElement 节点的 Ref

PhotoSlider

继承自 PhotoProvider。手动控制 react-photo-view 的展现与隐藏

名称 类型 必选 描述
images dataType[] 图片列表
index number 图片当前索引
visible boolean 可见
onClose (evt) => void 关闭事件
onIndexChange Function 索引改变回调

谁在使用

Comments ( 0 )

Sign in for post a comment

TypeScript
1
https://gitee.com/MinJieLiu/react-photo-view.git
git@gitee.com:MinJieLiu/react-photo-view.git
MinJieLiu
react-photo-view
react-photo-view
master

Help Search