Create a customized plugin with the caption plugin didn't appear

[MennatAllahMagdy]

I am trying to create a customized plugin that displays poll info and I want it to appear below the image and caption.
Here's my customized plugin

import {
  ComponentProps,
  createModule,
  PLUGIN_THUMBNAILS,
  PLUGIN_CAPTIONS,
  PluginProps,
  useLightboxState,
} from "yet-another-react-lightbox";

function PollComponent({ children }: ComponentProps) {
  const { currentSlide } = useLightboxState();
  return (
    <div
      style={{
        height: "100%",
        display: "flex",
        flexDirection: "column",
      }}
    >
      {children}

      <div
        style={{
          padding: 16,
          // textAlign: "center",
          color: "#fff",
          backgroundColor: "var(--yarl__color_backdrop, #000)",
        }}
      >
        <div className="m-auto flex h-80 w-full max-w-[95%] flex-col gap-3 overflow-y-scroll md:h-56">
          <p className="text-2xl font-bold">{t("poll")}</p>
           {/* rest of logic*/}
        </div>
      </div>
    </div>
  );
}

// export default function PollCaptionPlugin({ addParent }: PluginProps) {
//   addParent(PLUGIN_CAPTIONS, createModule("pollCaption", PollComponent));
// }
export default function PollCaptionPlugin() {
  createModule("pollCaption", PollComponent);
}

I tried this 2 ways to createModule but nothing changes

export default function PollCaptionPlugin({ addParent }: PluginProps) {
    addParent(PLUGIN_CAPTIONS, createModule("pollCaption", PollComponent));
}

or

export default function PollCaptionPlugin() {
  createModule("pollCaption", PollComponent);
}

And here's my lightbox component

import React from "react";
import "yet-another-react-lightbox/plugins/captions.css";
import Captions from "yet-another-react-lightbox/plugins/captions";
import Lightbox from "yet-another-react-lightbox";
import PollCaptionPlugin from "./PollCaptionPlugin";

declare module "yet-another-react-lightbox" {
  interface GenericSlide {
    src: string;
    pollName: string;
  }

  interface SlideImage {
    pollName: string;
  }
}
const PhotoModal = ({
  photoItem,
  open,
  setOpen,
}: {
  photoItem: PhotoDetail | undefined;
  open: boolean;
  setOpen: (value: React.SetStateAction<boolean>) => void;
}) => {
  const slides: any = [
    {
      src: photoItem?.websiteUrl,
      description: photoItem?.description,
      pollName: photoItem?.poll?.name,
    },
  ];

  return (
    <>
      {photoItem && (
        <Lightbox
          open={open}
          close={() => setOpen(false)}
          slides={slides}
          plugins={[Captions, PollCaptionPlugin]}
          captions={{ descriptionMaxLines: 1, descriptionTextAlign: "center" }}
          styles={{
            container: {
              backgroundColor: "rgba(0, 0, 0, .95)",
            },
            captionsDescriptionContainer: {
              paddingBottom: "3%",
            },
          }}
          render={{
            buttonPrev: () => null,
            buttonNext: () => null,
          }}
        />
      )}
    </>
  );
};

export default PhotoModal;

The lightbox opens and the photo with the caption appears but the poll plugin doesn't, Can you help spot the problem?

[igordanchenko]

Hi there!

Here are 2 modifications that you need to make:

1. First off, your Poll component must be inserted into the React tree above the Controller module

addParent(MODULE_CONTROLLER, createModule("poll", PollComponent));

2. You need to wrap the children with an extra <div> wrapper since yarl_container uses absolute positioning

<div style={{ flex: 1, position: "relative" }}>{children}</div>

And to make this solution compatible with #225, you can use the following conditional logic:

export default function Poll({ contains, addParent }: PluginProps) {
  addParent(
    contains(PLUGIN_THUMBNAILS) ? PLUGIN_THUMBNAILS : MODULE_CONTROLLER,
    createModule("poll", PollComponent),
  );
}

Live demo - https://codesandbox.io/p/devbox/yet-another-react-lightbox-227-2q6qmp?file=%2Fsrc%2FPoll.tsx

[MennatAllahMagdy]

@igordanchenko Brilliant, it works like a charm! But can I ask How do I know where I need to insert it in the tree?
Thank you so much for your support and time ♥
What a great package!

[igordanchenko]

But can I ask How do I know where I need to insert it in the tree?

A good starting point is to look at the DOM model and figure out where you want your custom elements to appear. It should provide a good enough indication of where the rendering should take place in the React tree.

In your case, to display the Poll component at the bottom of the slides and thumbnails, you needed to wrap the yarl__container <div> and render your Poll component below.

By looking at the standard lightbox modules tree, you can deduce that your insertion point should be between the Portal and Controller modules.

[MennatAllahMagdy]

Great! I get it now.