@appshell/react

React utilites for building micro-frontends with Webpack Module federation and Appshell.

Working examples can be found here.

Getting Started

To begin, you'll need to install @appshell/react:

npm install @appshell/react

or

yarn add @appshell/react

or

pnpm add @appshell/react

RemoteSlot

Where a remote is mounted. The slot resolves the remote key against the composition, loads it over Module Federation, renders fallback while that is in flight, and surfaces a load failure in place rather than taking the page down with it.

import { RemoteSlot } from '@appshell/react';

<App>
  <RemoteSlot remote="PingModule/Ping" fallback={<Spinner />} />
  <RemoteSlot remote="PongModule/Pong" fallback={<Spinner />} />
</App>

Any other props are passed through to the mounted remote.

The registry inlines the composition into the document it serves, so the component needs no configuration of its own.

useRemote

For access to the remote backing the surrounding RemoteSlot. Prefer this over looking your own entry up in the manifest — the component already knows its key.

import { useRemote } from '@appshell/react';

const MyComponent = () => {
  const remote = useRemote();

  ...
}

RemoteProvider

Supplies the remote a subtree is running as. RemoteSlot wraps what it mounts in one already, so you rarely construct it yourself — reach for it in tests, where it is what makes useRemote return something.

import { RemoteProvider } from '@appshell/react';

render(
  <RemoteProvider remote={manifest.remotes['PingModule/Ping']}>
    <Ping />
  </RemoteProvider>,
);

jsonResource

Wraps a fetch in a Suspense-compatible resource, so a component can read JSON during render instead of threading loading state through it.

import { jsonResource } from '@appshell/react';

const settings = jsonResource<Settings>('/api/settings');

const Panel = () => <pre>{settings.read().theme}</pre>;

License

MIT