mf-dynamic-remote-component
Loading in dynamic remote federated components made easy
## 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
```bash
npm install mf-dynamic-remote-component
```
## Examples
```js
// 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
```js
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 (
Loading...
}
>
);
}
```
### Loadable (No fallback)
```js
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 (
<>
);
}
```
### Loadable:
```js
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: (
),
});
return (
<>
);
}
```