React - Separating DOM and Data

[BoBberAdmin]

Looking for guidance on #separate-dom-and-data using React.
Want only a subset of the images in the gallery but all included in the Lightbox.
Our image data is dynamic so mapping out the array works well.

Tried filter() in the return() but then they are not included in the Lightbox.
Switching to dataSource with useEffect doesn’t open he Lightbox.

Does the thumbEl and placeholderSrc querySelector need to be rewritten?
Should an onClick event be used in the anchor tag and a different function be used?

Also don’t see anything in react-photoswipe-gallery that supports this.

Someone must have had this use-case before and built this..?
We really would like to use PhotoSwipe for this implementation.
Any advice, direction, code samples, or reference to a repository with this would very helpful and appreciated. Thank you.

[dimsemenov]

Your case is specifically described at #separate-dom-and-data. All you gotta do is pass the array of all images to the lightbox during the initialization and call loadAndOpen with the corresponding index onclick.

Something like (haven't tested):

import React, { useEffect } from 'react';
import PhotoSwipeLightbox from 'photoswipe/lightbox';
import 'photoswipe/style.css';

const images = [
  {
    src: 'https://dummyimage.com/1500x1000/555/fff/?text=Image+1',
    width: 1500,
    height: 1000,
  },
  {
    src: 'https://dummyimage.com/1500x1000/555/fff/?text=Image+2',
    width: 1500,
    height: 1000,
  },
  {
    src: 'https://dummyimage.com/1500x1000/555/fff/?text=Image+3',
    width: 1500,
    height: 1000,
  },
  {
    src: 'https://dummyimage.com/1500x1000/555/fff/?text=Image+4',
    width: 1500,
    height: 1000,
  }
];

export default function SimpleGallery(props) {
  let lightbox;
  useEffect(() => {
    lightbox = new PhotoSwipeLightbox({
      dataSource: images,
      pswpModule: () => import('photoswipe'),
    });
    lightbox.init();

    return () => {
      if (lightbox) {
        lightbox.destroy();
        lightbox = null;
      }
    };
  }, []);

  return (
    <>
      <button
        onClick={() => lightbox.loadAndOpen(2)}
        type="button"
      >
        Open 3rd image
      </button>
      <button
        onClick={() => lightbox.loadAndOpen(3)}
        type="button"
      >
        Open 4th image
      </button>
    </>
  );
}

The thumbEl and placeholderSrc are responsible for opening/closing zoom animation, you can implement them in React too, likely using Refs.

[BoBberAdmin]

Was way over thinking how complex this needed to be. Your simple example helped out tremendously.
Now have it working with .map() like your demo and passing in openAndLoad id separately with the array data. 👌
Will post once cleaned up and obfuscated.

Thank you Dmytro.
When we are commercial success you will not be forgotten 🇺🇦