How to create a Plugin

You can create a Typescript plugin class by implementing the IPlugin interface. If you are using Javascript you can simply create a class that has the methods defined in the IPlugin interface.

import React from "react";
import { IPlugin, PluginStore } from "react-pluggable";

class HelloPlugin implements IPlugin {

  pluginStore!: PluginStore;

  getPluginName(): string {
    return "Hello@1.2.3";
  }

  getDependencies(): string[] {
    return ["ClickMe@1.0.0"];
  }

  init(pluginStore: PluginStore): void {
    this.pluginStore = pluginStore;
  }

  activate(): void {
    this.pluginStore.addFunction("showAlert", () => {
      alert("Hello World");
    });
  }

  deactivate(): void {
    this.pluginStore.removeFunction("showAlert");
  }
}

export default HelloWorldPlugin;

Note: If we directly define the type of pluginStore variable as PluginStore class (i.e. public pluginStore: PluginStore; ) then it will throw an error because PluginStore class is not initialized in either constructor or class property declaration.

In this case, we can declare pluginStore in Plugin class as shown:

pluginStore! : PluginStore;