How to write custom plugin?

[budarin]

Hi!

I want to write custom plugin to render custom toolbar with some buttons.
Is there any documentation on how to write your own plugins?

[igordanchenko]

No, I'm afraid there are no tutorials if that's what you're asking about. However, the documentation provides some good starting points, and there are almost a dozen plugins with source code available in this repository. Please let me know if you have any specific questions.

[budarin]

I started to figure it out and couldn't (

I need to place the Delete button in the lower right corner and use the plugin parameter to declare a handler for clicking it.

We can't place it in the toolbar because there will be accidental clicks due to a miss, so it shouldn't be there.

I looked at the plugins code and couldn't figure out the general idea of how to implement all this.

[igordanchenko]

Here is the easiest way to add a standalone floating button:

import Lightbox, { IconButton } from "yet-another-react-lightbox";

declare module "yet-another-react-lightbox" {
  interface Labels {
    Delete?: string;
  }
}

// ...

<Lightbox
  // ...
  render={{
    controls: () => (
      <IconButton
        label="Delete"
        icon={DeleteIcon}
        style={{ position: "absolute", bottom: 8, right: 8 }}
        onClick={() => {
          // ...
        }}
      />
    ),
  }}
/>

And here is how you can implement it via a reusable plugin:

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

declare module "yet-another-react-lightbox" {
  interface Labels {
    Delete?: string;
  }

  interface Callbacks {
    delete?: Callback;
  }
}

function DeleteButton({ on }: ComponentProps) {
  return (
    <IconButton
      label="Delete"
      icon={DeleteIcon}
      style={{ position: "absolute", bottom: 8, right: 8 }}
      onClick={() => {
        on.delete?.();
      }}
    />
  );
}

function Delete({ addChild }: PluginProps) {
  addChild(MODULE_CONTROLLER, createModule("Delete", DeleteButton));
}

// ...

<Lightbox
  // ...
  plugins={[Delete]}
  on={{
    delete: () => {
      // ...
    },
  }}
/>

[budarin]

Thanks!
It works for me