tim-soft / react-spring-lightbox Goto Github PK

Failed to compile.
/Users/xxx/workspace/xxx/xxx-test-app/node_modules/xxx-ui-components/node_modules/react-spring-lightbox/dist/index.es.js
Module not found: Can't resolve 'styled-components' in '/Users/xxx/workspace/xxx/xxx-test-app/node_modules/xxx-ui-components/node_modules/react-spring-lightbox/dist'

@tim-soft I also thought about adding swipe bottom-to-top to dismiss would be very UX friendly.

Originally posted by @tim-kozak in #25 (comment)

It would be great to make this configurable. Because in some cases it requires a bit more effort to slide than expected.

I just discovered this library and used the demo and noticed that the content sometimes is moved after the pinch zoom gesture has ended.

I created a video recording of this:

https://drive.google.com/file/d/1Y_S7kQX2d7BnPr5xaLNIXXdhybB8qMEu/view?usp=sharing

Version: 1.4.11

Swiping left and right will output this error. Tried older versions of the library, but no solution so far.

How it possible to close the lightbox clicking outside it?

It's a good lib, i need to disable the mousewheel swipe. but there is no props found for that purpose.
Thanks

What happened

There is a strange issue when installing with NPM that it requires 2 npm i when the repo is clean.

A minimal reproducible example is at https://github.com/pswai/react-spring-lightbox-install-issue

I have tried with Node 12 and 14. They create package-lock.json in slightly different formats but the issue remains.

I have tried with Yarn also. With Yarn the yarn.lock file is consistent. However, when attempting that with my actual project repo, my unit test suites fail for places using Lightbox. I don't have the error message at hand but I can provide if it helps.

Tested environment

NodeJS: 12.12.0 / 14.16.0
NPM: 6.11.3 / 6.14.11

Step to reproduce

1. Remove node_modules folder if exists.
2. Run npm i.
3. Notice that package-lock.json is changed. (diff is attached)
4. Necessary packages are not installed.
5. Run npm i again.
6. Notice that package-lock.json is changed back.

Changes to package-lock.json after the first run

{
  "name": "spring-lightbox-issue",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "@babel/runtime": {
      "version": "7.14.0",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
      "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
      "requires": {
        "regenerator-runtime": "^0.13.4"
      }
    },
-    "@react-spring/animated": {
-      "version": "npm:@tim-soft/[email protected]",
-      "resolved": "https://registry.npmjs.org/@tim-soft/react-spring-animated/-/react-spring-animated-9.0.0-beta.33.tgz",
-      "integrity": "sha512-fXPywLQOWciayrq6nbdl+bAngZxNDDC7ZNigOvYv6Gfhqr9RNNQ0Nkn71bTomjQ4YKRlXjz9gcjzwKS/cW10gA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "@react-spring/shared": "9.0.0-beta.33",
-        "tiny-invariant": "^1.0.4"
-      }
-    },
-    "@react-spring/core": {
-      "version": "npm:@tim-soft/[email protected]",
-      "resolved": "https://registry.npmjs.org/@tim-soft/react-spring-core/-/react-spring-core-9.0.0-beta.34.tgz",
-      "integrity": "sha512-12DdLwQNgq+bFLGlcEaqUqe3tdqchZipbMb2F9H4jYfSIieQ8hQHRQvunS88j3EOMBKv9fdT8NTCZ0Br1Hd4Wg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "@react-spring/animated": "npm:@tim-soft/[email protected]",
-        "@react-spring/shared": "9.0.0-beta.33",
-        "use-memo-one": "^1.1.0"
-      }
-    },
-    "@react-spring/shared": {
-      "version": "9.0.0-beta.33",
-      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.0.0-beta.33.tgz",
-      "integrity": "sha512-oGalrGtIg7ZMn9VW5PzLFMDAa8vH5V0XIeC4WFk7JB4hBfhxx6yzPwjMxSJfRrt/Q+WuS2cPoR5qN0RpH+fJOA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "tiny-invariant": "^1.0.4"
-      }
-    },
-    "@react-spring/web": {
-      "version": "npm:@tim-soft/[email protected]",
-      "resolved": "https://registry.npmjs.org/@tim-soft/react-spring-web/-/react-spring-web-9.0.0-beta.36.tgz",
-      "integrity": "sha512-9qhvnJ/VkIeG59jTB4KgYvq5MH6qW/cPxylnORZlwHjNTA4WWtGB8CO08HDgIEoF6f5VaHWs3QIlthgsiN++Jg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "@react-spring/animated": "npm:@tim-soft/[email protected]",
-        "@react-spring/core": "npm:@tim-soft/[email protected]",
-        "@react-spring/shared": "9.0.0-beta.33"
-      }
-    },
    "react-spring-lightbox": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/react-spring-lightbox/-/react-spring-lightbox-1.5.0.tgz",
      "integrity": "sha512-/MzmJ3cNuFTVvn4A5MG4HQXWxnfGVyZ9FHwFnJvsKLr/X1Vp6iw1ojFBFrrJegoEC2tVzWZ1UK4GJLul/dBMfw==",
      "requires": {
        "@babel/runtime": "^7.12.13",
-        "@react-spring/web": "npm:@tim-soft/[email protected]",
        "react-use-gesture": "9.0.4"
      }
    },
    "react-use-gesture": {
      "version": "9.0.4",
      "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.0.4.tgz",
      "integrity": "sha512-G0sbQY+HSm2gSVIlD+LE1unpVpG7YZRTr8TI72vo0Nu1lecJtvjbcY3ZLonEZLTtODJgLL6nBllMRXyy0bRSQA=="
    },
    "regenerator-runtime": {
      "version": "0.13.7",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-    },
-    "tiny-invariant": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
-      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
-    },
-    "use-memo-one": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
-      "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ=="
    }
  }
}

Hi,

I'm trying to find a lightbox that uses a <canvas> instead <img>, is this something that could be switched over relatively easily?

export type ImagesListItem = Omit<
    React.HTMLProps<HTMLImageElement>,
    'draggable' | 'onClick' | 'onDragStart' | 'ref'
> & { alt: string; loading?: 'auto' | 'eager' | 'lazy'; src: string };

The purpose is to eliminate the image's src in View Source and Chrome DevTools, I'm guessing the HTML5 element will have richer features and continued improvements.

It would be cool and useful if your lightbox solution can show video elements too:

current const images:

const images = [
    {
        src:
            'https://timellenberger.com/static/blog-content/dark-mode/win10-dark-mode.jpg',
        alt: 'Windows 10 Dark Mode Setting'
    },

possible new solution const images:

const images = [
    {
        src:
            'https://timellenberger.com/static/blog-content/dark-mode/win10-dark-mode.jpg',
        alt: 'Windows 10 Dark Mode Setting,
        type: 'video,
        video: 'path-to-video.mp4'
    },

what do you think of this feature request?

Getting cannot read property 'ref' of null from @react-spring on useTransition

Codesandbox example has same problem
https://codesandbox.io/s/71hts

Thank you for your great flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.
It would be very useful if you can builtin lazyloading images too.

Hi, thank for the library, works very well.

I have one issue though. I render custom footer from which I can open a modal with form inputs, the problem is, that even if I am focused in the input and press arrow keys, the slides move as well also some other keys like Home or End doesn't work because the lightbox capture all.

Not sure how to solve this, I see the keyboard keys are hardcoded in the lightbox.

Solution might be to capture keys only if the lightbox is focused, but not sure if there could be any issues.
Also might be very handy have the keys configurable and also possible to disable completely.

What happened
When installing react-spring-lightbox npm gives following warning:
npm WARN deprecated [email protected]: This package is no longer maintained. Please use @use-gesture/react instead

Suggested fix
Migrate react-use-gesture to @use-gesture/react

Tested environment
Node: v16.17.0
NPM: 8.15.0

Step to reproduce
npm install react-spring-lightbox on a fresh CRA app

Hi,
first of all: Thank you for your hard work. Your library works amazingly well.
The only issue I have, is that I'm unable to change the max zoom level.

For my application this is a rather critical feature, and it seems like the only way to change it, would be to manually edit the props for image.ts.

If you know any other way or might be able to allow to set the props externally, it would be amazing.

Thank you in advance!

On such implementation

      <Lightbox
        currentImageIndex={currentImage}
        setCurrentIndex={setCurrentImage}
        isOpen={viewerIsOpen}
        onClose={() => closeLightbox()}
        images={photoGallery.photos}
      />

When viewerIsOpen is true, the modal opens and starts downloading every elements of images.

If there is a lot of elements, it slows down the browser a lot, especially on mobile.

Is there a way to download only the visible image or maybe lazy load only the few next images ?

Here is my code

const [currentImageIndex, setCurrentIndex] = useState(0);

const gotoPrevious = () =>
currentImageIndex > 0 && setCurrentIndex(currentImageIndex - 1);

const gotoNext = (GalleryImages: any) => {
console.log(currentImageIndex);
currentImageIndex + 1 < GalleryImages.length &&
setCurrentIndex(currentImageIndex + 1);
};

<Lightbox
isOpen={true}
className="bg-black/70"
onClose={() => setIsLightboxView(false)}
onNext={() => gotoNext(GalleryImages)}
onPrev={gotoPrevious}
singleClickToZoom
images={GalleryImages.map((photo: any) => ({
src: photo.src,
alt: photo.alt,
}))}
currentIndex={currentImageIndex}
renderPrevButton={() => (
<IoIosArrowBack
className={text-5xl text-primary absolute left-20 cursor-pointer}
/>
)}
renderNextButton={() => (
<IoIosArrowForward
className={text-5xl text-primary absolute right-20 cursor-pointer}
/>

Hey, I'd like to know, is there any way to disable zooming altogether for the lightbox? Thanks

Is there a way to replace img element with Image component from Next.js?