GithubHelp home page GithubHelp logo

minjieliu / react-photo-view Goto Github PK

View Code? Open in Web Editor NEW
1.4K 8.0 119.0 19.61 MB

An exquisite React photo preview component.

Home Page: https://react-photo-view.vercel.app

License: Apache License 2.0

TypeScript 62.87% JavaScript 2.24% Shell 0.04% Less 2.17% CSS 1.10% MDX 31.57%
react photo image-swipe photo-swipe image-preview react-component gallery gallery-images image

react-photo-view's Introduction

react-photo-view

English | 中文

An exquisite React photo preview component.

NPM version Downloads Minified size Gzip size

example

Quick start

features

  • Support touch gestures, drag and pan physical effect sliding, two-finger specified position to zoom in and out
  • All aspects of animation connection, open and close the rebound touch edge, let the natural interaction effect
  • The image is adaptive, with a suitable initial rendering size, and adapts according to the adjustment
  • Support for custom previews like <video> or any HTML element
  • Keyboard navigation, perfect for desktop
  • Support custom node expansion, easy to achieve full-screen preview, rotation control, picture introduction and more functions
  • Based on typescript, 7KB Gzipped, supports server-side rendering
  • Simple and easy to use API, zero cost to get started

Install

yarn add react-photo-view

Basic usage:

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

react-photo-view's People

Contributors

caandoll avatar calebbarnes avatar chemiadel avatar dependabot[bot] avatar fharles avatar junyan avatar konstantinkreft avatar minjieliu avatar oh-suki avatar silious avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-photo-view's Issues

最新版本的 create-react-app 無法安裝

這款圖片檢視組件是我目前看過最好的,但使用最新版本 create-react-app 創建的專案無法安裝 react-photo-view

react:17.0.2
create-react-app:4.0.3

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from [email protected]
npm ERR! node_modules/react-photo-view
npm ERR!   react-photo-view@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Administrator\AppData\Local\npm-cache\eresolve-report.txt for a full report.      

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Local\npm-cache\_logs\2021-05-31T19_04_30_869Z-debug.log
0 verbose cli [
0 verbose cli   'E:\\IDE\\nodejs\\node.exe',
0 verbose cli   'C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
0 verbose cli   'i',
0 verbose cli   'react-photo-view'
0 verbose cli ]
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 3ms
4 timing config:load:defaults Completed in 2ms
5 timing config:load:file:C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 1ms
6 timing config:load:builtin Completed in 1ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:D:\Users\Administrator\Downloads\my-app\.npmrc Completed in 1ms
10 timing config:load:project Completed in 1ms
11 timing config:load:file:C:\Users\Administrator\.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:C:\Users\Administrator\AppData\Roaming\npm\etc\npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 1ms
17 timing config:load:setEnvs Completed in 0ms
18 timing config:load Completed in 7ms
19 timing npm:load:configload Completed in 8ms
20 timing npm:load:setTitle Completed in 1ms
21 timing npm:load:setupLog Completed in 0ms
22 timing npm:load:cleanupLog Completed in 2ms
23 timing npm:load:configScope Completed in 0ms
24 timing npm:load:projectScope Completed in 1ms
25 timing npm:load Completed in 15ms
26 timing config:load:flatten Completed in 3ms
27 timing arborist:ctor Completed in 1ms
28 timing idealTree:init Completed in 1047ms
29 timing idealTree:userRequests Completed in 3ms
30 silly idealTree buildDeps
31 silly fetch manifest react-photo-view@*
32 timing arborist:ctor Completed in 0ms
33 http fetch GET 304 https://registry.npmjs.org/react-photo-view 1908ms (from cache)
34 silly fetch manifest classnames@^2.2.0
35 http fetch GET 304 https://registry.npmjs.org/classnames 36ms (from cache)
36 silly fetch manifest react@^17.0.2
37 http fetch GET 304 https://registry.npmjs.org/react 32ms (from cache)
38 silly fetch manifest react@^16.8.0
39 timing idealTree Completed in 3043ms
40 timing command:install Completed in 3051ms
41 verbose stack Error: unable to resolve dependency tree
41 verbose stack     at Arborist.[failPeerConflict] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1210:25)
41 verbose stack     at Arborist.[loadPeerSet] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1177:34)
41 verbose stack     at async Arborist.[buildDepStep] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:880:11)
41 verbose stack     at async Arborist.buildIdealTree (C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:218:7)
41 verbose stack     at async Promise.all (index 1)
41 verbose stack     at async Arborist.reify (C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:136:5)
41 verbose stack     at async Install.install (C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\lib\install.js:150:5)
42 verbose cwd D:\Users\Administrator\Downloads\my-app
43 verbose Windows_NT 10.0.19043
44 verbose argv "E:\\IDE\\nodejs\\node.exe" "C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "i" "react-photo-view"
45 verbose node v16.2.0
46 verbose npm  v7.15.0
47 error code ERESOLVE
48 error ERESOLVE unable to resolve dependency tree
49 error
50 error While resolving: �[1mmy-app�[22m@�[1m0.1.0�[22m
50 error Found: �[1mreact�[22m@�[1m17.0.2�[22m�[2m�[22m
50 error �[2mnode_modules/react�[22m
50 error   �[1mreact�[22m@"�[1m^17.0.2�[22m" from the root project
50 error
50 error Could not resolve dependency:
50 error �[35mpeer�[39m �[1mreact�[22m@"�[1m^16.8.0�[22m" from �[1mreact-photo-view�[22m@�[1m0.5.2�[22m�[2m�[22m
50 error �[2mnode_modules/react-photo-view�[22m
50 error   �[1mreact-photo-view�[22m@"�[1m*�[22m" from the root project
50 error
50 error Fix the upstream dependency conflict, or retry
50 error this command with --force, or --legacy-peer-deps
50 error to accept an incorrect (and potentially broken) dependency resolution.
50 error
50 error See C:\Users\Administrator\AppData\Local\npm-cache\eresolve-report.txt for a full report.
51 verbose exit 1

偶现crash Cannot read properties of undefined (reading 'key')

TypeError: Cannot read properties of undefined (reading 'key')
(anonymous function)
src/PhotoSlider.tsx:420
417 | const realIndex = photoIndex === 0 ? photoIndex + index : photoIndex - 1 + index;
418 | return (
419 | <PhotoView
420 | key={item.key ? item.key + item.src : realIndex}
| ^ 421 | src={item.src}
422 | intro={item.intro}
423 | onReachMove={this.handleReachMove}
View compiled
(anonymous function)
src/PhotoSlider.tsx:412
409 | {images
410 | .slice(
411 | // 加载相邻三张
412 | Math.max(photoIndex - 1, 0),
| ^ 413 | Math.min(photoIndex + 2, imageLength + 1),
414 | )
415 | .map((item: dataType, index) => {
View compiled
VisibleAnimationHandle
src/components/VisibleAnimationHandle.tsx:56
53 | }
54 | }, [visible]);
55 |
56 | return children({
| ^ 57 | photoVisible,
58 | showAnimateType,
59 | originRect,

touchmove,mousemove等事件绑在window,导致页面其他内容无法滚动

我最近在实现一个功能,页面打开主内容就是这个大图查看,但是页面自定义了一个分享按钮,点击后会生成一张用于分享的图片,图片比较长,需要滚动,但由于本插件将事件绑定在了window上,导致页面的滚动失效,请问应该如何处理?

不支持ssr

DeepinScreenshot_select-area_20200802012556
在ssr环境下无法访问到window对象,从而导致打包失败。
根据报错提示应该是绑定了滚动复原事件。有希望解决吗?

预览大图不显示

被我全局的css img { max-width: 100%; } 影响到 img.PhotoView__Photo 0 *300, 宽度变成0了

能否添加图片旋转甚至裁剪的功能

考虑到目前现有的react图片预览控件都很少有这个功能,或者有的都不好用,作者能否扩展支持一下图片旋转甚至裁剪,这些在预览中对能够图片操作的功能,谢谢!

关于放大后双击缩小的体验问题

找一长没有充满全屏的图片,
把图片拖动一下,最好拖到极限(切换下一张图前的那下)
然后,双击缩小,图片没归位,只能展示一部分。

在移动端 图片默认预览的scale太小

我在移动端浏览器或者chrome模拟移动端打开预览,750*1200的图片,展示的默认宽度只有屏幕的一半,需要手动放大显示,我看到img 标签的 scale为0.5-0.6,我觉得应该0.8-0.9左右才合适,暂未发现原因。

能否开放旋转图片的接口

我通过 imageClassName 为内部 img 标签添加 transform: rotate(90deg) 属性,却无法控制容器内图片的旋转,请问能否额外开放内部图片旋转控制属性

onClose 回调

没有阻止冒泡,也没有传递e。导致点击穿透

brokenElement增加类型判断或者PhotoConsumer过滤非图片文件功能咨询

<PhotoProvider>
  <fileList>
    <PhotoConsumer>
    <PhotoConsumer/>
  <fileList/>
</PhotoProvider>

作者你好,这样使用,fileList里面可能还有其他类型的文件Excle或者doc,这种怎么出现预览的时候过滤掉非图片类型的文件呢(我想点击doc文件名同样显示图片预览组件,只是过滤掉非图片类型的),或者brokenElement属性能够根据文件类型判断,在非图片的时候,根据文件后缀自己增加excel默认图或者doc默认图,现在brokenElement只能添加一个无类型判断的默认图

图片放大之后不居中

放大时鼠标箭头偏左,放大后的图片偏右,
放大时鼠标箭头偏右,放大后的图片偏左

默认支持toolbar

添加一个showToolbar的属性,来渲染一个默认的toolbar组件,因为在大多数情况下,使用一个默认的toolbar组件来支持缩放,旋转的功能就可以满足需求,而不需要另外在自定义实现。

vue3版本的实现

非常喜欢你的组件,但我平时使用 vue 比较多,出于学习和自用参考你的代码使用 vue3 实现了一版,功能基本相同,地址在这里:https://github.com/NameWjp/vue3-photo-preview 希望可以帮到同样需要 vue 版本的人,如果你不介意的话后续我可以放到 npm 供其他人使用。

关于图片预览组件的部分UI建议

大佬你好,很荣幸能使用你写的这一款图像预览组件。
使用之前,我是根据photoswipe去二次开发,但是使用体验不尽如人意。
使用你的这个图像预览感觉很方便,能在顶部增加一个工具栏的话就更好了。
希望这个建议可以让组件更友好一些:-)

PhotoSlider

这个有例子吗?show code 只看见一个

放大和缩小按钮

@MinJieLiu 你好,我看例子上面是有放大和缩小按钮的,但是我没有找到对应代码,能看看怎么实现的不

图片加载失败导致无法滑动切换

环境: Android / iOS / PC

如果图片加载失败,没有创建 img 节点,导致无法滑动切换

尝试修复:设置 brokenElement ,图片加载失败会提供默认图,仍不能滑动切换

如何修改预览的背景颜色?

当前预览时的背景颜色是黑色的,如果想更换背景颜色,或是更改背景的透明度,我还没有找到相关的props,有解决方法吗?

图片无法预览

在PhotoConsumer的handleTouchStart和handleTouchEnd

在个别机型中, 对于一次touch事件,touchStart接收到的clientX, clientY与touchEnd的不一致. 所以导致预览没触发

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.