How to add a poll below the thumbnails?

[MennatAllahMagdy]

I am using the caption and thumbnail plugin, I want to show a poll question with answers where the user can vote (API request), the problem I am facing is I want to show it below the thumbnail and I want it to be fixed through all the slides or at least shown in each slide. From the previous answers, I figured out I need to create a custom plugin and a custom slide, correct me if I am wrong. Is it doable with these specific requirements? and if yes can you help me with how to do it?
Here's my current lightbox:

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

// ...

<Lightbox
  open={open}
  close={() => setOpen(false)}
  slides={slides}
  carousel={{
    finite: true,
    imageFit: "contain",
  }}
  plugins={[Thumbnails, Captions,]}
  captions={{ descriptionMaxLines: 1, descriptionTextAlign: "center" }}
  styles = {{
    container: {
      backgroundColor: "rgba(0, 0, 0, .95)",
    },
    captionsDescriptionContainer: {
      paddingBottom: "5%",
    },
  }}
/>

[igordanchenko]

Hi there!

You are absolutely correct; you need a custom plugin in this case. To add your poll component below the thumbnails, you need to wrap the topmost Thumbnails element with an extra <div> and render your poll below.

Here is how you can implement this.

// Poll.tsx

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

function PollComponent({ children }: ComponentProps) {
  // access current slide if needed
  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)",
        }}
      >
        Poll
      </div>
    </div>
  );
}

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

<Lightbox
  slides={slides}
  open={open}
  close={() => setOpen(false)}
  // Poll plugin must be declared after Thumbnails
  plugins={[Captions, Thumbnails, Poll]}
  carousel={{ finite: true }}
  captions={{ descriptionMaxLines: 1, descriptionTextAlign: "center" }}
  styles={{
    root: { "--yarl__color_backdrop": "rgba(0, 0, 0, .95)" },
    captionsDescriptionContainer: { paddingBottom: "5%" },
  }}
/>

Live demo - https://codesandbox.io/p/devbox/yet-another-react-lightbox-225-6gfyg2?file=%2Fsrc%2FApp.tsx

Please let me know if this addresses your use case.

[MennatAllahMagdy]

@igordanchenko Thank you a lot for the fast reply! it helped me a lot but there's a concern about how to pass the poll data to the poll plugin, should I customize the slide so I can access currentSlide.poll?
in the file that has lightbox component I initialize my slides like that

 const slides = albumItem?.photosAlbums?.map((img) => ({
    src: img.websiteUrl,
    description: img.caption,
    pollName: albumItem.poll.name,
    poll: albumItem.poll.questions,
  }));

where

albumItem.poll = {
    id: string;
    name: string;
    questions: {
      id: string;
      text: string;
      repliesCount: number;
      languageCode: string;
      availableAnswers: {
        id: string;
        text: string;
        repliesCount: number;
      }[];
    }[];
  };

but I couldn't access the poll in the currentSlide, is there a way to do so or a better approach?
Thanks again!

[igordanchenko]

Please see how to add Custom Slide Props

[MennatAllahMagdy]

@igordanchenko Thank you very much it worked as expected!