I've implemented a basic single photo array as shown in the example, here's my:

    const images = [ {
      src: 'my-file-path.jpg',
      title: 'Cool Cat Photo!',
      description: 'No, really, cool cat photo!'
    } ];
   ...

   render = () => ...

   ...

   <Lightbox images={images}/>

I see the photo thumbnail, however when I click on the photo, I get little untitled buttons pop up around the thumbnail (I assume those are the zoom controls etc), no lightbox effect and I also get this error:
invariant.js:38 Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded

Before trying to implement this component, I've been using the bootstrap 'Thumbnail' tag to show this photo with no issues.

Is there something I can do to 'fix' my issue? Has anyone else had this type of problem?

Thanks!

Hi;

I am trying to install it in my react 18 apps. But seems it's not working there. Is anyone able to help how may I implement it in react 18 apps?

Thanks.

Just a suggestion:

It would be great if the thumbnails were wrapped in a lazy load component to improve performance when dealing with really long pages with hundreds/thousands of images.

Once implemented and clicking on the image, the modal opens up but all the styles are missing, therefore the component is unusable

A few nice ideas to improve zoom and pan are as follows:

1. Zooming in on the area under the mouse cursor rather than the center of the photo once it is larger than the viewport. This will go nicely together with the pinch to zoom feature on mobile, as it's expected to zoom in on the area directly under your fingers.
2. Panning quickly has inertia. Having the photo keep moving and then gradually slowing down is a welcome effect for the greater ease it creates to pan, and goes nicely with other gestures on mobile, such as navigating between photos and closing the lightbox. This also would go nice with a rubber band effect when an edge the photo reaches an edge of the viewport.

when i click event toggleLightbox then position scroll back to 0 . if i want still position click image when click close lightbox then i must how ????
example : when position scrollTop : 500 . after i click close lightbox then scrollTop 500 not 0

I built the dist folder using gulp build, however, the /lib directory is missing that is present when downloading from npm. The /lib files seem to be the ones that are used, so is there a separate build process or build script that should be used? My goal is to use build and use my fork while the pull request is unmerged. Kind Thanks!

I've been searching for something to replace fancyBox and so far this is the nicest light box I've found for React. However it has several issues on mobile devices.

1. Switching from portrait to landscape landscape view and vice versa messes up the whole display. I haven't tried resizing a desktop browser, but usually the two can be taken care of in one event handler.
2. In portrait mode, it looks great on mobile, but in landscape, not so much. One of the reasons I want to replace fancyBox is because it doesn't give me a full view of photos but gets in the way with padding and margins.
3. There doesn't seem to be support for touch gestures to flip through galleries and to control zoom. That would also be a nice thing to have.
4. You can still scroll behind the light box on mobile. It seems that there's a different way to disable scrolling on mobile than on desktops.

This issue is more of a dump of all my thoughts and would need to be broken down into individual issues. I just wanted to first give you an overview of what I see and ask if there are plans to implement/improve any of these things.

Everytime I click the image, it gives me this error:
Uncaught TypeError: Cannot read property 'className' of undefined at o (index.js:347) at i (index.js:352) at s (index.js:373) at t.value (index.js:674)

Version: 1.2.1

This is a suggestion for a different animation when switching the photos. Instead of the morph animation, which is pretty cool, a sliding of one image off the screen with the next sliding into its place is more expected for mobile, as it naturally follows the fingers.

Hi, although the component initiated, it seems I'm having some problems displaying the lightbox piece. The image depicts what is shown when clicking an image. Perhaps there is a missing step to pull in css?

Image is not defined in react-lightbox-component/build/webpack:/src/lib/components/Image.jsx:272:1

176176 | "use strict";
176177 |
176178 | function o(e) {

176179 | return "string" !== typeof e.className ? [] : e.className.split(/\s+/);
| ^ 176180 | }
176181 |
176182 | function i(e, t) {

I like the look and general function of this lightbox, but anyone who relies on the keyboard or accessible tech to navigate would be locked out of using this component. You could "fake" it by adding role="button", tabindex="0", and some keyboard handlers that trigger the same event as a click when space or return/enter are pressed, but it should really be using buttons. On the plus side, the images that have click handlers do have alt text, which is important for screen readers (so long as it's accurate).

That said, once opened, you are using buttons, but they have no accessible names. This could easily be remedied by adding aria-label="button purpose". They also don't have focus states, which should mirror the hover states (this would apply to the image "buttons" above as well).

You can't close the lightbox with the escape key.

The main image being a background image creates an interesting challenge, since it's semantically a meaningless div; I imagine there's a good reason for it, but it would be preferably to actually use a native image element, along with the same alt text. There's probably a better way to associate the description with the image as well, though I can't think of how off the top of my head. Technically, though, it actually isn't hidden from screen readers.

I realize this isn't the most well worded ticket, but it would be great to see this become a fully accessible option!

In its current state, looks like this component is only able to render a collection of thumbnails.

This may be just wishful thinking, but is there a way to integrate the light box with React Router so that images open in the light box could also have URLs. The concept I'm describing is similar to how looking through photos on Facebook works. I have a simple little light box on one of my projects that works this way, but it is far from complete. It's more of a proof of concept and I can extract it tomorrow to demonstrate what I mean.

In my render method, I'm using the component as follows...

var images = [{
"src":"/app-proxy/_smc_image_util_v1/processImage?image=/we/ae33f263-a66b-4983-911e-0f1c4ed361bb/9f1edd82-52ac-440d-9e1a-f438201d62ad",
"title":"",
"description":"Don.jpg"
},{
"src":"/app-proxy/_smc_image_util_v1/processImage?image=/we/da171042-aae4-42a1-900b-109eb5a1b230/70c5e5f1-b5ef-4570-b7ed-f0c3e99ec75c",
"title":"",
"description":"Hydrangeas.jpg"
}]

var lightBox = ; //console warning/error shown below on this line.
activeComponent =

In the console, this is displayed:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Case.

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Case.

Any ideas?

Is it because of my bad code ( i just started learning react) or is the gallery disappearing on every 3-4 refresh of the page? I only wanna know if this happens to someone else?

When I try to close lightbox on desktop, it works as expected. However, on mobile or with DevTools device mode I can't close it at all.
I get this warning constantly:
Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

thank for nice component.
but i need use when my images us base64.
in this case thumbnail is work proper but in view image nothing shown.

When zooming in, panning, and then zooming out partially, the picture gets stuck with part of it off screen and can't be panned back. This issue appears on all devices I've tested on, but iOS devices have it the worst. The zoom does not return to normal on iOS at all.

Another odd thing is that minimum zoom level allowed. For some reason, it is smaller than the original size of the photo. I think that the minimum zoom level should be either the original size of the photo, or in the case of a large photo, the size of the viewport (like you would get with background-size: contain).