@react-mf-lib/react-adapter

React adapter for remote-reload-utils - enables React apps to load remote components with Module Federation.

Features

• Load remote React components dynamically
• Built-in Suspense and ErrorBoundary support
• Retry mechanism for failed loads
• TypeScript support

Installation

npm install @react-mf-lib/react-adapter remote-reload-utils

Usage

RemoteModuleProvider

import { RemoteModuleProvider } from '@react-mf-lib/react-adapter'

function App() {
  return (
    <RemoteModuleProvider
      pkg="@myorg/remote-app"
      version="^1.0.0"
      moduleName="Dashboard"
      scopeName="myorg"
      loadingFallback={<Spinner />}
      errorFallback={(error, reset) => <Button onClick={reset}>Retry</Button>}
      componentProps={{ userId: 123 }}
    />
  )
}

lazyRemote + Suspense

import { lazyRemote } from '@react-mf-lib/react-adapter'
import { Suspense } from 'react'

const LazyDashboard = lazyRemote({
  pkg: '@myorg/remote-app',
  version: '^1.0.0',
  moduleName: 'Dashboard',
  scopeName: 'myorg',
})

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyDashboard userId={123} />
    </Suspense>
  )
}

SuspenseRemoteLoader

import { SuspenseRemoteLoader } from '@react-mf-lib/react-adapter'

function App() {
  return (
    <SuspenseRemoteLoader
      pkg="@myorg/remote-app"
      version="^1.0.0"
      moduleName="Dashboard"
      scopeName="myorg"
      fallback={<Spinner />}
      errorFallback={(error) => <div>Error: {error.message}</div>}
      componentProps={{ userId: 123 }}
    />
  )
}

useRemoteModuleHook

import { useRemoteModuleHook } from '@react-mf-lib/react-adapter'

function MyComponent() {
  const { component: RemoteComp, loading, error } = useRemoteModuleHook({
    pkg: '@myorg/remote-app',
    version: '^1.0.0',
    moduleName: 'Dashboard',
    scopeName: 'myorg',
  })

  if (loading) return <Spinner />
  if (error) return <div>Error: {error.message}</div>
  if (!RemoteComp) return null

  return <RemoteComp userId={123} />
}

License

MIT