Passing props through remote component

[qlbp]

Hi there, is there a way to pass props to the remote component, for instance:

//in host/src/Host.jsx
function Host(){
  const world = "world!";
  return <RemoteComponent url="url" scope="scope" module="./App" name={world}/>;
} 
export default Host;

//in remote/src/App.jsx
function App(props) {
  console.log(props);
  return <h2>Hello {props.name}</h2>;
}
export default App;

Currently I believe this would just render Hello as the props object "sent" to App is empty.

[Hasan Ayan]

This is a valid request; I don't know how I missed this on the initial implementation :)

However, to implement this, I would like to ask for your help because even if I made the change, I can't test this anytime soon. So, could you please open a PR for this?

all changes have to be in RemoteComponent.tsx,

1- add new line after line 10, and add a new property called props -> props?: object;
2- in the component named RemoteComponent at the bottom of the page;
after line 57; add this line props = {},
3- spread props object into the returned component <Component {...props}/>

[qlbp]

Thanks for the swift reply, sure I would be more than happy to test this out :)

[qlbp]

It's in PR, thanks again 👍

[Mike Freeman]

So is this PR going to be pushed into main?

[Hasan Ayan]

sorry guys, I haven't merged this PR because I wanted better type support for the RemoteComponent. it's now a generic component which lets you set the props you want to pass to it with a generic type.

I could not test it myself as the dependencies seem to be quite old and I've been away from CRA world. I don't have time to get back into it now. Could you please install the latest version (0.0.5) and test it?

Here is a usage example

interface MyExtraProps {
  name: string;
}

function App() {
  return (
    <>
      <React.Suspense fallback="loading">
        <RemoteComponent<MyExtraProps>
          url="http://localhost:3002/remoteEntry.js"
          scope="app2"
          module="./Button"
          name="nice button"
        />
      </React.Suspense>
      <React.Suspense fallback="loading">
        <InnerApp />
      </React.Suspense>
    </>
  );