I want to start my React microapp with props I'm passing from Single SPA (customProps). The only way I've figured out is:

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import App from './where/my/root/is.js';

function domElementGetter() {
    return document.getElementById("mounting-node")
}

let EnhancedRootComponent = App; /* 1 */

const reactLifecycles = singleSpaReact({
    React,
    ReactDOM,
    rootComponent: EnhancedRootComponent, /* 1 */
    domElementGetter,
})

export const bootstrap = [
    (args) => {
        /* 2 */ EnhancedRootComponent = () => <App myArgs={args.thePropsIWannaPass} />;
        return Promise.resolve();
    },
    reactLifecycles.bootstrap,
];

export const mount = [reactLifecycles.mount];
export const unmount = [reactLifecycles.unmount];

This does work (I can see and use the passed props in my ponent) but I'm not pletely OK with the fact that the root ponent changes in between calling singleSpaReact (1) and calling bootstrap(2). Would there be side effects to this that I'm not seeing now? Does anyone know a better approach for this?

I want to start my React microapp with props I'm passing from Single SPA (customProps). The only way I've figured out is:

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import App from './where/my/root/is.js';

function domElementGetter() {
    return document.getElementById("mounting-node")
}

let EnhancedRootComponent = App; /* 1 */

const reactLifecycles = singleSpaReact({
    React,
    ReactDOM,
    rootComponent: EnhancedRootComponent, /* 1 */
    domElementGetter,
})

export const bootstrap = [
    (args) => {
        /* 2 */ EnhancedRootComponent = () => <App myArgs={args.thePropsIWannaPass} />;
        return Promise.resolve();
    },
    reactLifecycles.bootstrap,
];

export const mount = [reactLifecycles.mount];
export const unmount = [reactLifecycles.unmount];

This does work (I can see and use the passed props in my ponent) but I'm not pletely OK with the fact that the root ponent changes in between calling singleSpaReact (1) and calling bootstrap(2). Would there be side effects to this that I'm not seeing now? Does anyone know a better approach for this?

• javascript
• reactjs
• micro-frontend

Share Improve this question Follow asked Jan 29, 2020 at 23:54 Pedro OteroPedro Otero 33466 silver badges1515 bronze badges 1

• If you build mostly React microfrontends then the model that es with Piral may be more helpful here. github./smapiot/piral – Florian Rappl Commented Feb 2, 2020 at 13:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You have this value inside the props variable without this reassign. Check this out:
Root-config.js, file responsible for passing prop to microfrontend

import { registerApplication, start } from 'single-spa';
import * as isActive from './activity-functions';

registerApplication('@pany/micro2', () => System.import('@pany/micro2'), isActive.micro2);

registerApplication('@pany/micro1', () => System.import('@pany/micro1'), isActive.micro1, { "authToken": "test" });

start();

micro1 Root.tsx

import React from 'react';

export default class Root extends React.Component {
  constructor(props: any){
    super(props)
  }

  state = {
    hasError: false,
  };

  ponentDidCatch() {
    this.setState({ hasError: true });
  }

  render() {
    console.log(this.props)
    return (
      <div>test</div>
    );
  }
}

console.log output:

props:
   authToken: "test" <---- props which you pass
   name: "@pany/micro1"
   mountParcel: ƒ ()
   singleSpa: {…}
   __proto__: Object

for more advance usage

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  loadRootComponent: (props) => 
      new Promise((resolve, reject) => resolve(() =>
      <Root {...props} test2={'test2'}/>)),
  domElementGetter,
});