MinJieLiu / React Photo View
Licence: mit
一款精致的 React 图片预览组件
Stars: ✭ 218
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
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
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 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
的图片预览组件
Demo: https://minjieliu.github.io/react-photo-view
特性
- 支持左右切换导航、上/下滑关闭、双击放大/缩小、双指放大/缩小/平移、键盘导航/关闭、旋转、点击切换控件等
- 打开/关闭缩放动画
- 自适应图像适应
- 长图模式
- 支持桌面端(兼容 IE10+)/移动端
- 轻量的体积
- 高度的扩展性
- 支持服务端渲染
- 基于
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 | 否 |
注意:若 PhotoConsumer
的 children
为自定义组件
- 需要向外部参数暴露
React.HTMLAttributes
- 展开/关闭动画精准位置则需要用
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].