Remote Module Loader

A badass React hook for loading remote modules dynamically. This package allows you to dynamically load remote components in your React application using Webpack's Module Federation.

demo.mp4

Table of Contents

• Remote Module Loader
  • Table of Contents
  • Installation
  • Usage
    • useLoadRemote(config: RemoteConfig): UseRemoteLoaderResult
  • Contributing

Installation

To install the package, use npm or yarn:

npm install @yuskraft/remote-module-loader

or

yarn add @yuskraft/remote-module-loader

Usage

For a detailed usage example, check out our demo application.

Import the useLoadRemote hook and use it in your React component to load remote modules.

import { useLoadRemote } from '@yuskraft/remote-module-loader';

const MyComponent = () => {
  const { Component, ready, hasError } = useLoadRemote({
    url: 'https://example.com/remoteEntry.js',
    scope: 'myRemote',
    module: './MyRemoteComponent',
  });

  if (hasError) {
    return <div>Error loading component</div>;
  }

  if (!ready) {
    return <div>Loading...</div>;
  }

  return Component ? <Component /> : null;
};

useLoadRemote(config: RemoteConfig): UseRemoteLoaderResult

• Parameters:

  • config: An object with the following properties:
    • url: The URL of the remote entry file.
    • scope: The scope name of the remote module.
    • module: The module name to load.

• Returns:

  • An object with the following properties:
    • Component: The loaded remote component, or null if not yet loaded.
    • ready: A boolean indicating if the component is ready to be used.
    • hasError: A boolean indicating if there was an error loading the component.

Contributing

Contributions are welcome! Please open an issue or submit a pull request!