FancyBox 5: Fancybox.getInstance() Returns null in React Environment Despite Elements Being in DOM

[bvr666]

Describe the bug

I am experiencing an issue where Fancybox.getInstance() returns null consistently when trying to initialize FancyBox in a React project using FancyBox 5. The expected behavior is that FancyBox should correctly bind to the elements and return an instance, but it appears that no instance is created, which prevents any changes from taking effect in the UI.

Reproduction

• I am using FancyBox version 5.0.36.

• The project is built with React 18.

• FancyBox is imported as follows: import { Fancybox } from '@fancyapps/ui'; import '@fancyapps/ui/dist/fancybox/fancybox.css';

• Inside useEffect where the fancybox is getting initialised:

  useEffect(() => {
  // Log to verify elements are in the DOM
  const elements = document.querySelectorAll("[data-fancybox]");
  console.log("FancyBox target elements count:", elements.length);
  
  // Bind FancyBox to gallery elements
  if (elements.length > 0) {
    Fancybox.bind("[data-fancybox]", {
      groupAll: true,
      animated: true,
      Toolbar: {
        display: {
          left: [],
          middle: [],
          right: ["slideshow", "thumbs", "close"],
        },
      },
      Thumbs: {
        autoStart: false,
        hideOnClose: true,
      },
      Slideshow: {
        autoStart: false,
        speed: 3000,
      },
      closeButton: "top",
      infinite: true,
    });
  
    console.log("FancyBox initialized:", Fancybox.getInstance());
  } else {
    console.log("No FancyBox target elements found in the DOM");
  }
  
  // Clean up FancyBox
  return () => {
    Fancybox.unbind("[data-fancybox]");
  };
  }, []);

Additional context

No response

[fancyapps]

Hi.

Using the Fancybox.bind() method, you simply add a click handler to the page that checks if the clicked element matches the selector, and that should launch Fancybox. At that point, no instance of Fancybox has been created.

[bvr666]

I am experiencing an issue with configuring FancyBox 5 in a React environment. Despite adding various options (such as Toolbar, Thumbs, Slideshow) while binding FancyBox to elements with Fancybox.bind(), none of these options seem to reflect in the UI when the gallery is launched. The primary issue is that the toolbar items (play, thumbs, close), autoplay settings, and thumbnail views are not appearing as configured. The reference that need to develop was attached.

[fancyapps]

Please check out any Stackblitz, CodeSandbox demo you can find here on how to use Fancybox with React - https://fancyapps.com/resources/integration/#react

If you still have a problem or have any questions, please create a demo by forking any example code.