banthagroup / fslightbox-react

Basic version of Fullscreen Lightbox for React.js. Website: https://fslightbox.com/react
MIT License
169 stars 23 forks source link

Weird flash when closing lightbox #202

Closed pedrokuper closed 2 years ago

pedrokuper commented 2 years ago

Im working on project and for a gallery im using fslightbox-react in a React with Typescript project. Whenever i close an image, there's a weird flash that happens at random times.

This is an example with a youtube iframe

This is another example using images

Have anyone experienced something like that? I've worked with the library in another project and worked like a charm.

Thanks in advance for the help.

The code im using: (i removed the arrays links for privacy but it was just img links and youtube embed links)

import React, { useState } from "react";
import FsLightbox from "fslightbox-react";
import PhotoCard from "../PhotoCard/PhotoCard";
const Gallery = () => {
  const [lightboxController, setLightboxController] = useState({
    toggler: false,
    slide: 0,
  });

  function openLightboxOnSlide(number: any) {
    console.log(number);
    setLightboxController({
      toggler: !lightboxController.toggler,
      slide: number,
    });
  }

  const image = [

  ];

  const videos = [

  ];

  const videoThumbnail = [

  ];

  const test = (arr: any) => {
    const ARR = arr.map((item: any) => <img src={item} />);
    return ARR;
  };

  return (
    <div className="gallery-container">
      {image.map((img, key) => {
        const number = key;
        return (
          <img
            key={key}
            onClick={() => openLightboxOnSlide(number + 1)}
            src={img}
          />
        );
      })}
      <FsLightbox
        toggler={lightboxController.toggler}
        slide={lightboxController.slide}
        sources={test(image)}
      />
    </div>
  );
};

export default Gallery;