Features

• Keep remote modules in a cache on the window object
• Promise based
• 0 dependencies
• Support for both lazy/suspense, loadable or others

Get started

npm install mf-dynamic-remote-component

Examples

// config object example
{
  "path": "/client/App2RemoteEntry.js", // Path to remote container entry. Ideally CDN location in live environments.
  "scope": "App2", // Container scope name
  "module": "./MyRemoteComponent" // Shared module
}

Suspense

import React, {lazy, Suspense} from 'react';
import {RemoteComponent} from 'mf-dynamic-remote-component';

export default function RemoteHostComponent(config) {
  const Component = React.lazy(() => RemoteComponent(config));
  return (
    <Suspense
      fallback={
        <div class="col">
          <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>
      }
    >
      <Component config={config} customProps={customProps} />
    </Suspense>
  );
}

Loadable (No fallback)

import React from 'react';
import {RemoteComponent} from 'mf-dynamic-remote-component';
import loadable from '@loadable/component';

export default function RemoteHostComponent(config) {
  const Component = loadable(() => RemoteComponent(config));
  return (
    <>
      <Component
        config={config}
        customProps={customProps}
        otherProps={otherProps}
      />
    </>
  );
}

Loadable:

import React from 'react';
import {RemoteComponent} from 'mf-dynamic-remote-component';
import loadable from '@loadable/component';

export default function RemoteHostComponent(config) {
  const Component = loadable(() => RemoteComponent(config), {
    fallback: (
      <div class="col">
        <div class="spinner-border text-primary" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    ),
  });
  return (
    <>
      <Component
        config={config}
        customProps={customProps}
        otherProps={otherProps}
      />
    </>
  );
}