@flow48/mfe-loader

MFELoader is a lightweight React component designed to load micro frontends (MFEs) dynamically inside a host React application using Qiankun. It simplifies mounting, unmounting, and prop passing, allowing easy integration of micro frontends.

Features

• Dynamically load micro frontends based on app name and entry.
• Pass props from the host application to the micro frontend.
• Automatic mounting and unmounting.
• Supports multiple independent instances of the same micro frontend.
• Type-safe integration for React + TypeScript.

Usage

1. Basic usage

import { MFELoader } from 'mfe-loader';

export const MFEDmsLoaderExample = () => {
  return (
    <MFELoader
      app="dms"
      name="MFEDmsLoaderTest1"
      props={{
        initialPath: '/account-documents',
        testProp: 'Test Value',
      }}
    />
  );
};

• app: The unique name of the micro frontend you want to load.
• name: A unique identifier for this instance (used internally by Qiankun).
• props: An object with props to pass to the micro frontend.

2. Passing props to specific components

<MFELoader
  app="dms"
  name="MFEDmsLoaderTest1"
  props={{
    initialPath: '/account-loan-documents',
    sfWidgetProps: {
      userId: '12345',
      theme: 'dark',
    },
  }}
/>

Inside the sub-app, the sfWidgetProps can be forwarded to a specific component:

<Route
  path="/account-loan-documents"
  element={<SfWidget {...props.sfWidgetProps} />}
/>

3. Multiple instances

Render multiple instances of the same micro frontend by providing a unique name:

<MFELoader app="dms" name="MFE1" props={{initialPath: '/doc1'}} />
<MFELoader app="dms" name="MFE2" props={{initialPath: '/doc2'}} />

Each instance maintains its own state and container.

Notes

• Ensure the sub-app implements Qiankun lifecycle methods (bootstrap, mount, unmount) and accepts props.
• Avoid calling render() inside update() in the sub-app to prevent overwriting the host app.
• For dynamic prop updates, use state management or context inside the sub-app.

Helper

Installation

Make sure your project uses the correct npm registry for the Flow48 organization:

Create a file .npmrc

@flow48:registry=https://registry.npmjs.org/

Then install the package via npm or yarn:

Publishing

npm version patch  # 0.1.0 → 0.1.1
npm version minor  # 0.1.0 → 0.2.0
npm version major  # 0.1.0 → 1.0.0

1. Login to npm (must have access to @flow48 org):

npm login

2. Build the library

yarn build:prod

3. Publish the package

# Public package
npm publish --access public

# Or restricted to org members
npm publish --access restricted

4. Verify the published package

npm info @flow48/mfe-loader

5. Push the version tag to remote

yarn add @flow48/mfe-loader