Nested <Fancybox> React components - allowed or antipattern?

[7iomka]

Hi.
I create a React component Fancybox

import { memo, useEffect, FC } from 'react';
import { Fancybox as NativeFancybox } from '@fancyapps/ui/dist/fancybox.umd';

export interface FancyboxProps {
  delegate?: string;
  options?: {};
}

const Fancybox: FC<FancyboxProps> = (props) => {
  const { delegate = '[data-fancybox]', options = {}, children } = props;

  useEffect(() => {
    const opts = options;

    NativeFancybox.bind(delegate, opts);

    return () => {
      NativeFancybox.destroy();
    };
  }, [delegate, options]);

  // eslint-disable-next-line react/jsx-no-useless-fragment
  return <>{children}</>;
};

export default memo(Fancybox);

And inside root of my app I just wrapped it in this component

<Fancybox>
//...
</Fancybox>

And, later, inside one of my sections I want to bind some spefific options for a gallery.
It is allowed to make another <Fancybox options={{..}} > inside first global one?
Purpose of global one is to global control all modals / triggers of the app, that have not required some specific options on instance.

[fancyapps]

You are welcome to write your own React component, this - https://fancyapps.com/docs/ui/fancybox/react - is just an example.

[7iomka]

You are welcome to write your own React component, this - https://fancyapps.com/docs/ui/fancybox/react - is just an example.

I used code from example, but my question is another: it allowed to nest created components or not?
Nested instance will override parent instance options or I receive duplicate event listeners on the same element?

[fancyapps]

Fancybox is not adding event listeners directly to the elements. It creates one global click event listener and reuses it for every binding. Therefore it works for all elements created in the future. Basically, Fancybox.bind(SELECTOR) is the same as jQuery document.on('click', SELECTOR, ..). So, you can safely nest, if selectors do not match.

[7iomka]

Fancybox is not adding event listeners directly to the elements. It creates one global click event listener and reuses it for every binding. Therefore it works for all elements created in the future. Basically, Fancybox.bind(SELECTOR) is the same as jQuery document.on('click', SELECTOR, ..). So, you can safely nest, if selectors do not match.

I have problems with my project when I have multiple instances like this
https://codesandbox.io/s/dreamy-elbakyan-pzcx9?file=/pages/index.js

Behavior in codesandbox - event subscription in the last instance fired 3 times (if you open another instance, for example - click to gallery).
Behavior in my local project - event subscription not working at all if multiple instances found (in one page)

How to find a workaround for this? I need event subscription at component level, not at the page or at the layout level.

[fancyapps]

Sorry, I haven't found the time to build more advanced React component yet. Anyway, you can always create your own click handler and start Fancybox using Fancybox.show() method.

[7iomka]

Sorry, I haven't found the time to build more advanced React component yet. Anyway, you can always create your own click handler and start Fancybox using Fancybox.show() method.

I'd love for you to take the time to go through some basic React use cases with variations of options in different parts of the code within the same page.
Also interested in the use case on custom components that are built with forwardRef and in some cases not listen or prevent some events like onClick
for example if I use this Button component
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/button/src/Button.tsx
and pass to it data-fancybox attributes - nothing not woking :(