All Projects → MinJieLiu → React Photo View

MinJieLiu / React Photo View

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

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to React Photo View

Os Fileup
Helper app to understand how to upload files and do basic image/video processing in hybrid android apps.
Stars: ✭ 190 (-12.84%)
Mutual labels:  photo
Ptimagealbumviewcontroller
"Image Album" — or "Photo Album" if you like that better — View( Controller) for all crazy iOS developers out there...
Stars: ✭ 199 (-8.72%)
Mutual labels:  photo
React Code Input
React component for entering and validating PIN code.
Stars: ✭ 207 (-5.05%)
Mutual labels:  react-component
React Datepicker2
react datepicker component.(include persian jalaali calendar)
Stars: ✭ 191 (-12.39%)
Mutual labels:  react-component
Gallery shell
📷 Bash Script to generate static responsive image web galleries.
Stars: ✭ 198 (-9.17%)
Mutual labels:  photo
React Times
A time picker react component, no jquery-rely
Stars: ✭ 206 (-5.5%)
Mutual labels:  react-component
Cropiwa
📐 Configurable Custom Crop widget for Android
Stars: ✭ 2,185 (+902.29%)
Mutual labels:  photo
Yoshino
A themable React component library!Flexible Lightweight PC UI Components built on React! Anyone can generate easily all kinds of themes by it!
Stars: ✭ 216 (-0.92%)
Mutual labels:  react-component
React Native Pdfview
📚 PDF viewer for React Native
Stars: ✭ 198 (-9.17%)
Mutual labels:  react-component
React Reorder
Drag & drop, touch enabled, reorderable / sortable list, React component
Stars: ✭ 209 (-4.13%)
Mutual labels:  react-component
React Voice Components
Set of React components that use the Web Speech API to bring voice experience to React applications
Stars: ✭ 195 (-10.55%)
Mutual labels:  react-component
Loupe
Twitter-like Android image viewer library
Stars: ✭ 197 (-9.63%)
Mutual labels:  photo
React Input Color
React color picker
Stars: ✭ 208 (-4.59%)
Mutual labels:  react-component
Video Thumbnail Generator
📷 Generate thumbnail sprites from videos.
Stars: ✭ 190 (-12.84%)
Mutual labels:  photo
React Adsense
📽 a simple React-component for Google AdSense / Baidu advertisement.
Stars: ✭ 210 (-3.67%)
Mutual labels:  react-component
React Native Image Viewer
🚀 tiny & fast lib for react native image viewer pan and zoom
Stars: ✭ 2,334 (+970.64%)
Mutual labels:  react-component
Exiftool Vendored.js
Fast, cross-platform Node.js access to ExifTool
Stars: ✭ 200 (-8.26%)
Mutual labels:  photo
React Split Pane
React split-pane component
Stars: ✭ 2,665 (+1122.48%)
Mutual labels:  react-component
React Intl Tel Input
Rewrite International Telephone Input in React.js. (Looking for maintainers, and PRs & contributors are also welcomed!)
Stars: ✭ 212 (-2.75%)
Mutual labels:  react-component
Rskimagecropper
An image cropper / photo cropper for iOS like in the Contacts app with support for landscape orientation.
Stars: ✭ 2,371 (+987.61%)
Mutual labels:  photo

react-photo-view

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

npm react-photo-view react-photo-view

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

特性

  1. 支持左右切换导航、上/下滑关闭、双击放大/缩小、双指放大/缩小/平移、键盘导航/关闭、旋转、点击切换控件等
  2. 打开/关闭缩放动画
  3. 自适应图像适应
  4. 长图模式
  5. 支持桌面端(兼容 IE10+)/移动端
  6. 轻量的体积
  7. 高度的扩展性
  8. 支持服务端渲染
  9. 基于 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 自定义渲染
toolbarRender (overlayProps) => React.ReactNode 工具栏渲染
className string className
maskClassName string 遮罩 className
viewClassName string 图片容器 className
imageClassName string 图片 className
loadingElement JSX.Element 自定义 loading
brokenElement JSX.Element | ((photoProps: brokenElementDataType) => 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 索引改变回调

谁在使用

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].