alejandronanez / react-runtime-research

How to inject a component in a react application at runtime

React Runtime Explorations

👋 Hey there, I explored two different alternatives on how to "inject/render" a third party component into a React Application at runtime.

Don't feel like reading?

Check this video out https://www.loom.com/share/6fff9866e5c4421d8b3979449de6a70b

How to run this?

# in one terminal
cd iframe
npm run dev
# open localhost:3000
# in another terminal
cd embeded
npm run dev
# open localhost:3001

Dynamic Imports

TL;DR: This doesn't meet the requirements because it would require the consumers of the application to access the development version of the parent application. It was a fun exploration, Vite makes things so much easier!

Long version Read the Dynamic Import Readme

Veredict ❌ This approach doesn't check all the boxes.

iframe

TL;DR This meets all the requirements! It doesn't give you the best developer experience, but gets the job done.

Long version Read the iframe Readme

Veredict ✅ This approach checks all the boxes.

Other approaches worth taking a look at

I think that Module Federation could solve this problem in a more elegant way as it doesn't have the limitations that the iframe solution has. The caveat is that you'd have to work closely with the engineers on the parent application team in order to configure the remotes for your application.