RendererPlugin

RendererPlugin is a plugin class that allows you to inject components into the app. It uses placeholders to render React components.

Adding Components

We can add a component against a placeholder using the executeFunction of the PluginStore object. It consists of 3 arguments :

1. The first argument contains a string ‘Renderer.add’ which means that we are executing the method corresponding to Renderer.add present in the RendererPlugin.

2. The second argument contains the name of the placeholder against which we want to store the component provided.

3. The third argument contains the component to be added.

Example:

this.pluginStore.executeFunction("Renderer.add", "paraRender", () => (
  <p>This is a paragraph</p>
));

Rendering Components

To render the components stores in the RendererPlugin, you need an instance of Renderer component which can be received by executing the "Renderer.getRendererComponent" method as shown below:

let Renderer = pluginStore.executeFunction("Renderer.getRendererComponent");

To render components stored against a placeholder, we provide that placeholder name as the props in the Renderer component.

<Renderer placement="paraRender" />

Example

Let's say we have a dashboard containing 3 sections which are rendering components using RendererPlugin.

We have a plugin called DashboardPlugin which will add a component to each section of the dashboard by passing a component against a respective placeholder in the RendererPlugin. In its activate function, we are adding components by passing the component as an argument in the executeFunction of the pluginStore.

class DashboardPlugin implements IPlugin {
  namespace = "Dashboard";

  activate(){
    this.pluginStore.executeFunction("Renderer.add", "header",
      () => <Header/>
    );

  activate(){
    this.pluginStore.executeFunction("Renderer.add", "left",
      () => <ProductList />
    );

  activate(){
    this.pluginStore.executeFunction("Renderer.add", "right",
      () => <InfoPanel />
    );

    //code
  }

}

As soon as the DashboardPlugin gets installed, it will render the components in each section of the dashboard using the slots of the RendererPlugin.