add support for passing parameters to remote components

hasanayan · Mar 30, 2023 · b3a9d2a · b3a9d2a
1 parent 4d9dd2b
commit b3a9d2a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dynamic-remote-component",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Allows you to dynamically load a component from a remote using webpack 5's module federation.",
   "keywords": [
     "react",

diff --git a/src/RemoteComponent.tsx b/src/RemoteComponent.tsx
@@ -1,8 +1,7 @@
-import { FC } from "react";
 import { attachScript } from "./attach-script";
 import { loadModule } from "./load-module";
-import { RemoteModule } from "./types";
 import { suspend } from "./suspend";
+import { RemoteModule } from "./types";
 import { getRemoteModuleId } from "./utils";
 
 export type RemoteComponentProps = RemoteModule & {
@@ -52,12 +51,21 @@ export const useRemoteModule = (remoteModule: RemoteModule) => {
   return getModuleSuspended(remoteModule);
 };
 
-export const RemoteComponent: FC<RemoteComponentProps> = ({
-  unLoadScriptOnUnmount = true,
-  exportName = "default",
-  ...remoteModule
-}) => {
-  const { [exportName]: Component } = getModuleSuspended(remoteModule);
+export function RemoteComponent<ExtraProps>(props: RemoteComponentProps) {
+  const {
+    unLoadScriptOnUnmount = true,
+    exportName = "default",
+    url,
+    scope,
+    module,
+    ...componentProps
+  } = props;
 
-  return <Component />;
-};
+  const { [exportName]: Component } = getModuleSuspended({
+    url,
+    scope,
+    module,
+  });
+
+  return <Component {...componentProps} />;
+}