How can I pass props to my custom plugin

[BabkinAV]

Hello, thanks for the wonderful library!
However, I have some troubles creating my own custom plugin.
Suppose I want to create a fixed sidebar to my lightbox carousel with some slide author information in it.

So I create the following component:

const LightboxSidebar = ({
  children,
  onButtonClick,
  ...props
}: {
  children?: ReactNode;
  onButtonClick?: () => void;
}) => {
  return (
    <>
      {children}
      <div className="lightboxSidebar">
        <Button appearance="primary" onClick={onButtonClick}>
          Button
        </Button>
      </div>
    </>
  );
};

export default LightboxSidebar;

then I wrap it with createModule function to create a module:

const LightboxSidebarModule = createModule(
    'LightboxSidebarModule',
    LightboxSidebar
  );

then I create a plugin via addModule:

function SidebarPlugin({
    addModule,
  }: {
    addModule: (module: Module) => void;
  }) {
    addModule(LightboxSidebarModule);
  }

and then add it to the Lightbox component:

<Lightbox
        ...
        plugins={[Thumbnails, Captions, Video, SidebarPlugin]}
        ...
 />

My sidebar is being displayed but unfortunately this way I can't pass any props to my sidebar. And I need to pass some data to my LightboxSidebar component via props along with some callbacks (like onButtonClick) from the parent component.
Could you please advise or share some example on how can I do that? I would be much appreciated!

[igordanchenko]

Hi there!

Here is how you can add TypeScript type definitions for custom lightbox props - https://yet-another-react-lightbox.com/advanced#CustomLightboxProps

After that you can pass your custom props to the Lightbox component and access them in your plugin module.

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

declare module "yet-another-react-lightbox" {
  interface LightboxProps {
    sidebar?: {
      onButtonClick?: () => void;
    };
  }
}

function LightboxSidebar({ children, sidebar: { onButtonClick } = {} }: ComponentProps) {
  return (
    <>
      {children}
      {/* ... */}
    </>
  );
}

function SidebarPlugin({ addModule }: PluginProps) {
  addModule(createModule("LightboxSidebarModule", LightboxSidebar));
}

// ...

<Lightbox
  sidebar={{
    onButtonClick: () => {
      // ...
    },
  }}
  plugins={[SidebarPlugin]}
  // ...
/>

I hope this helps!

[BabkinAV]

Thank you for the prompt reply, this one worked like a charm! 🔮