Create an extensible architecture with React

user_2983749 0
Viewed 6900

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).

enter image description here

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.

jsx tsx reactjs plugins
3 Answers

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

user_56319270

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

Microfrontends

Parcels

user_14290970

I am late to this but Just create a utility class with registry function, and register each component to the registry (just dictionary of key value pair, where key is a constant and Value is the component). T

Then when you display a component in your base app, get it from the registry using a key. Then once you publish this whole base app as package ( make sure to export the utility registry). A user can register a component with the same name and override the default component.

user_18432800
Related