Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(remote-view): pass through ...args in RemoteView #2463

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(remote-view): pass through ...args in RemoteView #2463

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions docs/components/remote-view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,15 +386,16 @@ for fetching ESM views.

| Prop | Type | Required? | Description | Default |
| ------------------------ | --------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------- | ----------- |
| `urls` | String[] (URLs) | Yes | URLs of the ESM Views you want to load | N/A |
| `urls` | `string[]` (URLs) | Yes | URLs of the ESM Views you want to load | N/A |
| `loadWithIframeFallback` | Function `fn(manifest: MicrofrontendManifest) => boolean` | No | Optional function to determine if an iframe fallback should be used in place of a React component. | `undefined` |

### `<RemoteView />`

| Prop | Type | Required? | Description | Default |
| --------- | ------------ | --------- | --------------------------------------------------------------------------------------- | -------------------- |
| `url` | String (URL) | Yes | URL to the remote view. Can be either an ESM view URL on your ESM CDN, or an iframe URL | N/A |
| `loading` | JSX.Element | No | Display a custom loading component whilst the remote view is being fetched and rendered | `<div>Loading</div>` |
| Prop | Type | Required? | Description | Default |
| --------- | -------------- | --------- | --------------------------------------------------------------------------------------- | -------------------- |
| `url` | `string` (URL) | Yes | URL to the remote view. Can be either an ESM view URL on your ESM CDN, or an iframe URL | N/A |
| `loading` | `JSX.Element` | No | Display a custom loading component whilst the remote view is being fetched and rendered | `<div>Loading</div>` |
| `...args` | `unknown[]` | No | Optional props to pass through to the component that will be rendered. | `undefined` |

`MicrofrontendManifest` represents the `package.json` of an ESM View served over
an ESM CDN. This includes fields like the package `name`, `style`,
Expand Down
5 changes: 3 additions & 2 deletions packages/remote-view/src/components/remote-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,16 @@ import { useRemoteView } from '../hooks/useRemoteView';
interface Props {
url: string;
loading?: JSX.Element;
[args: string]: unknown;
}

function DefaultLoading() {
return <div>Loading</div>;
}

export function RemoteView({ url, loading }: Props) {
export function RemoteView({ url, loading, ...args }: Props) {
const ViewComponent = useRemoteView(url);
const loadingOutput = loading ? loading : <DefaultLoading />;

return (ViewComponent && <ViewComponent />) || loadingOutput;
return (ViewComponent && <ViewComponent {...args} />) || loadingOutput;
}