Unable to render PhotoAlbum component after installation and setup - React v17.0.2

[naemtl]

Describe the bug

Hi, I'm trying to use your PhotoAlbum and Lightbox libs together to create an image gallery with lightbox functionality in my application. After installing your libs, it seems I'm unable to render anything coming from them. This is probably something I'm doing wrong, but I can't figure out what that is. I've also tried copying a simple example from your documentation to see if I can isolate the issue, but the problem persists.

Expected behavior

I expect the code to render. I don't receive any console errors though or anything to help me decipher what is going wrong.

How to reproduce

Here's my code:

import LightboxGallery from "../../components/LightboxGallery/LightboxGallery";

import popOneImg from "../../assets/images/pop-1.png";
import popTwoImg from "../../assets/images/pop-2.png";
import popThreeImg from "../../assets/images/pop-3.png";
import popFourImg from "../../assets/images/pop-4.png";
import popFiveImg from "../../assets/images/pop-5.png";
import popSixImg from "../../assets/images/pop-6.png";
import popSevenImg from "../../assets/images/pop-7.png";

import "./Principle.scss";

const LightboxGalleryContainer = () => (
  <div className="principle__images">
    <img className="principle__image" alt="Gerard" src={popOneImg} />
    <img className="principle__image" alt="Gerard" src={popTwoImg} />
    <img className="principle__image" alt="Gerard" src={popThreeImg} />
    <img className="principle__image" alt="Gerard" src={popFourImg} />
    <img className="principle__image" alt="Gerard" src={popFiveImg} />
    <img className="principle__image" alt="Gerard" src={popSixImg} />
    <img
      className="principle__image principle__image--seven"
      alt="Gerard"
      src={popSevenImg}
    />
  </div>
);

const Principle = () => {
  return (
    <div className="principle">
      {/* ... */}
        <LightboxGallery
          albumContainer={LightboxGalleryContainer}
          lightboxSlides={[
            { src: popOneImg },
            { src: popTwoImg },
            { src: popThreeImg },
            { src: popFourImg },
            { src: popFiveImg },
            { src: popSixImg },
            { src: popSevenImg },
          ]}
          />
      {/* ... */}
    </div>
  );
};

export default Principle;

The LightboxGallery component which I've made to reuse a couple times in my app:

import React, { useState } from "react";
import PhotoAlbum from "react-photo-album";
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";

import "./LightboxGallery.scss";

const LightboxGallery = ({ albumContainer, lightboxSlides }) => {
  const [index, setIndex] = useState(-1);

  return (
    <>
      <PhotoAlbum
        renderContainer={albumContainer}
        targetRowHeight={150}
        onClick={({ index: current }) => setIndex(current)}
      />

      <Lightbox
        index={index}
        slides={lightboxSlides}
        open={index >= 0}
        close={() => setIndex(-1)}
      />
    </>
  );
};

export default LightboxGallery;

Screenshots / Logs

No response

Additional context

No response

[igordanchenko]

Please review the documentation and minimal setup example. You are not passing the required parameters, so the result is not surprising.

[naemtl]

@igordanchenko I apologize, you're correct that I missed some details in the documentation. For example, I didn't realize you still need to pass the photos prop if you're also passing a renderContainer prop to PhotoAlbum. I may have one last question for you but I'll try to figure it out on my own for a little while first.

[igordanchenko]

Actually, both layout and photos props are required. Also I'm not sure you want to use custom renderContainer in this case. I'd suggest you start without custom render functions and work from there.

[naemtl]

Hi @igordanchenko, everything works now, thanks again! There is just one issue... When I try to resize the viewport, I get this error:

ERROR
ResizeObserver loop completed with undelivered notifications.
    at handleError (http://localhost:3000/static/js/bundle.js:84913:58)
    at http://localhost:3000/static/js/bundle.js:84932:7

Refreshing clears the error, but it will be thrown over and over as the screen's viewport is adjusted. Any ideas? I've stashed my changes and it seems like this is only happening when I use the react-photo-album lib.

Here's the code:

import React, { useState } from "react";
import PhotoAlbum from "react-photo-album";
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";

import "./LightboxGallery.scss";

const LightboxGallery = ({ photos }) => {
  const [index, setIndex] = useState(-1);

  return (
    <div className="lightbox-gallery">
      <div className="lightbox-gallery__photo-album">
        <PhotoAlbum
          layout="rows"
          photos={photos}
          padding={0}
          spacing={14}
          targetRowHeight={300}
          onClick={({ index: current }) => setIndex(current)}
        />
      </div>

      <Lightbox
        index={index}
        slides={photos}
        open={index >= 0}
        close={() => setIndex(-1)}
      />
    </div>
  );
};

export default LightboxGallery;

And the part of the parent component where I pass the photos:

<LightboxGallery
          photos={[
            { src: popOneImg, width: 950, height: 650 },
            { src: popTwoImg, width: 950, height: 650 },
            { src: popThreeImg, width: 950, height: 650 },
            { src: popFourImg, width: 950, height: 650 },
            { src: popFiveImg, width: 950, height: 650 },
            { src: popSixImg, width: 950, height: 650 },
            { src: popSevenImg, width: 985, height: 660 },
          ]}
        />

[igordanchenko]

I remember seeing similar error in either Chrome or Safari long time ago, but it was a non-issue and could be safely ignored. But the fact that you have a stack trace in your error message, makes me suspect you may be using some sort of ResizeObserver polyfill in your project. Please open new discussion and provide minimal reproducible example if you require further assistance.