React Pluggable: A Quick Guide
Tags: react, opensource, javascript
Published: 2020-12-17 12:22:51

This tutorial is designed to quickly get you acquainted with React Pluggable. It includes step by step instructions and examples for extra clarity. For more information, please visit the [official documentation](https://react-pluggable.github.io/?utm_source=React%20Pluggable&utm_medium=Dev.to&utm_campaign=Tutorial%20Article).

**What is React Pluggable?**

React Pluggable is an intuitive plugin system for [Javascript](https://www.javascript.com) & [React](https://reactjs.org) apps. It focusses on the abstraction of the UI and helps you think of the app as a **set of features** instead of a **set of components**. We at [GeekyAnts](https://geekyants.com/?utm_source=React%20Pluggable&utm_medium=Dev.to&utm_campaign=Tutorial%20Article) have used React Pluggable for large & complex apps like [BuilderX](https://builderx.io/?utm_source=React%20Pluggable&utm_medium=Dev.to&utm_campaign=Tutorial%20Article) to successfully add independent and dependent features over time. 

**Why React Pluggable?**

While working on [BuilderX](https://builderx.io/?utm_source=React%20Pluggable&utm_medium=Dev.to&utm_campaign=Tutorial%20Article), we realised that adding and removing features was becoming cumbersome. Furthermore, a lot of knowledge transfer was required for a new member to contribute. This slowed down the overall speed of development. To overcome this hurdle, we came up with a very basic version of what React Pluggable is today. 

**Features**

This plugin system has all your features and can be enabled/disabled with a single line of code.

1. To add a new feature in your app, you write it's logic and install it in the plugin store.
2. You can use that feature anywhere in the app by calling that feature using PluginStore rather than importing that feature directly.
3. If you do not want a particular plugin in your app, you can uninstall it from your plugin store or just comment out the installation.

**Installation**

Use npm or yarn to install  `react-pluggable`  in your app:

```bash
# NPM
npm install react-pluggable --save

# Yarn
yarn add react-pluggable
```

`Note: We are using Typescript in all our examples. You can also use it with Javascript without types.`

**Basic Example**

Let us create a plugin that will add an alert functionality to the component. 

Create a class ShowAlertPlugin and implement it with IPlugin interface:

ShowAlert*Plugin.tsx*

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

class ShowAlertPlugin implements IPlugin {
  public pluginStore: any;

  getPluginName(): string {
    return "ShowAlert Plugin";
  }

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

  activate(): void {
    this.pluginStore.addFunction("ShowAlert.doIt", () => {
      alert("Hello from the ShowAlert Plugin");
    });
  }

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

export default ClickMePlugin;
```

The **init** function is used to initialise everything that needs to be initialized from the plugin. The **activate** function is used to add any function/listener and dispatches an event. The **deactivate** function is a cleanup method that is used to remove everything that was added in the **activate** function.

Now, let's add ShowAlertPlugin to our app.

App.tsx

```bash
import React from "react";
import "./App.css";
import { createPluginStore, PluginProvider } from "react-pluggable";
import ShowAlertPlugin from "./plugins/ShowAlertPlugin";

const pluginStore = createPluginStore();
pluginStore.install(new ShowAlertPlugin());

function App() {

  return (
    <PluginProvider pluginStore={pluginStore}>
      <Example />
    </PluginProvider>
  );
}

export default App;
```

The createPluginStore() method returns a new instance of PluginStore class. Plugins are installed using the install() method of PluginStore class. PluginProvider makes the PluginStore available to any nested components wrapped inside it.

Using that plugin in our Target Component:

Example.tsx

```bash
import * as React from "react";
import { usePluginStore } from "react-pluggable";

const Example = () => {
  const pluginStore = usePluginStore();

  return (
    <>
      <button
        onClick={() => {
          pluginStore.executeFunction("ShowAlert.doIt");
        }}
      >
        Show Alert
      </button>
    </>
  );
};

export default Example;
```

The functions which are added to pluginStore are executed by passing their name as the first argument in the executeFunction() of the PluginStore object.

ShowAlertPlugin will get injected into the component as shown:

{% codesandbox yyu6m %}

**Todo Example**

Let's build a Todo example using React Pluggable.

The Todo list will appear when the login button is clicked. Although we are not doing actual authentication here, let's suppose that authentication is successful. In this case, we dispatch an event Auth.authenticated from AuthPlugin. The event is listened to by the ToDoPlugin which ultimately renders the Todo component.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6sun12spzztf4tjqz4bo.png)

On clicking the logout button, **Auth.loggedOut** event is dispatched from the AuthPlugin and listened to by the TodoPlugin, which stops the rendering of the Todo component.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mh55e24t8bouc2uxr5p2.png)

{% codesandbox z2s3w %}

React Pluggable has been rigorously tested during the development of BuilderX. It has helped GeekyAnts make the development of such a complex app a lot simpler. We now want this to help the developer community code more complex apps in a far simpler and feature-oriented way. If you wish to know more about the library, you can visit the [official documentation](https://react-pluggable.github.io/?utm_source=React%20Pluggable&utm_medium=Dev.to&utm_campaign=Tutorial%20Article).

This post was written by [Aditya J](https://twitter.com/GeekJamuar?s=20) and [Amar S](https://twitter.com/amar_somani?s=20). Edited by Kavya V.

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f0dy9w40jvll9gku0p9p.png)](https://react-pluggable.github.io/?utm_source=React%20Pluggable&utm_medium=Dev.to&utm_campaign=Tutorial%20Article)