Create an extensible architecture with React

Question

My team is creating the administration panel of a CMS using React, Typescript, TSX and Webpack. Each page of the administration panel has been created as a React component, and each page contains many other child components (one for each section).

The CMS distribution currently includes a bundled version of the javascript needed to run the web app, but not the original TSX files.

Now, we would like to make it possible to the developers using our CMS to extend the web app by

1) Injecting additional sections into the UI using a "slot-fill" approach

2) Possibly even overriding the existing sections rendering a different component in the same place.

<div>   <SidebarComponent />   <Section1Component />   <Section2Component />   // How to inject a  possible PluginComponent here? </div> 

From the research we've conducted so far, there seem to be no "official" way to do this, so I'm wondering what would be the best approach in this case.

Answer 1

I am facing the same issue where I need a component from a plugin to interact with a component from another plugin with a hook system. I have a created a small codesanbox with the same approach adapted to your need.

Basically the approach is to create a injectedComponents.js at the root of your plugin that specifies in which plugin and area your component needs to be injected.

Here is ademo

Answer 2

single-spa has some good options in order to achieve this. Please see if it can be help for you.

Microfrontends

Parcels