'Transpile React app to make it appear in a modal

I've got a (small) React app (vanilla create-react-app), that I would like to appear in a modal (bootstrap or similar) on another site. Is there a library that will simplify this process?

Specifically, the entire use case is that if my Javascript file is loaded (and just one javascript file), it will insert a "Click Me" type call to action, and when clicked my App component will be loaded into a new modal. It will need the CSS (for the app) to be included in some form as well.

I think all of this (excluding the call-to-action which is fairly simple) could be done during Babel/Webpack transpilation but I can't find anything off-the-shelf that seems to do this.

Solution 1:^[1]

This functionality is built into ReactDOM.render. Simply add an id to your element.

For example:

<!-- index.html -->

<script src="url/to/react/build/asset" as="script" />

<div id="button-and-modal"></div>

Then to render your react app inside the div:

// index.js

import { render } from 'react-dom';
import App from './App'

function renderReact() {
  const element = document.getElementById('button-and-modal');
  render(<App/>, element)
}

document.addEventListener('DOMContentLoaded', renderReact);

Then your react app would look something like this:

const App = () => (
  <div>
    <Button/>
    <Modal/>
  </div>
)

You can also code the button and modal outside of the react app and only have the modal content rendered by react. If you want to do that, then follow the same directions but add the javascript for the button+modal inside the renderReact function.

Solution 2:^[2]

You can use for example https://direflow.io/ to build your react app as a web component that you can render anywhere on any site.

Using your current project you can do

direflow create
cd <project-name>
npm install

and then copy your whole app in folder into direflow-components so your project tree would look like:

/public
/src
   /direflow-components
      /<project-name>
         // leave here only index.ts from example and copy all your project files here
         index.ts
   component-exports.ts
   index.ts
   react-app-env.d.ts
.eslintrc
...

If needed you can change

...
component: App,
configuration: {
  tagname: 'example-component',
},
...

to your component that you want to render and tagname by which app will be accessible. After all that you just do

npm run build

copy direflowBundle.js from build folder to your website and render your app on some website like so:

<body>
  <script src="./direflowBundle.js"></script>

  <awesome-component></awesome-component>
</body>

Solution 3:^[3]

I feel like I deal with this issue at every Front End job. It's definitely not easy, but I've found a number of ways to do it. I've tried the bundling idea you suggested but that one gave me the hardest time. The easiest way imo without a lot of hassle is to host your react app on a blank web page, then load it into an iframe where you need it.

At my last job, we wanted to migrate our shopify website to react, but with the way the shopify architecture was set up at the time, it made it difficult to us host a server-side rendered react app. So we built the web pages using Next.js and then deployed it to Vercel. We then inserted this as an iframe into the shopify website. It worked beautifully.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jeremy Gottfried
Solution 2	pmakowski
Solution 3	mahn00b

'Transpile React app to make it appear in a modal

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]