shared-context-between-mfs

A utility for sharing React Contexts across multiple Micro Frontends (MFEs) in a Module Federation setup. This package ensures that React Contexts are consistent and accessible across different applications, facilitating seamless state sharing and communication.

Features

• Provides a shared React Context that can be accessed by multiple MFEs.
• Ensures consistency of state across different applications.
• Facilitates communication between MFEs without the need for prop drilling.
• Compatible with Webpack Module Federation.

Installation

To install the package, run:

npm install shared-context-between-mfs

Usage

Host

import { ContextProvider } from "shared-context-between-mfs";

<ContextProvider.Provider value={[values]}>
  <React.Suspense>
    <RemoteComponent />
  </React.Suspense>
</ContextProvider.Provider>;

MicroFrontend

import { ContextProvider } from "shared-context-between-mfs";

const [values] = React.useContext(ContextProvider);

Webpack Config of Composer and Remotes

shared: [
          {
            'shared-context-between-mfs': {
                  import: 'shared-context-between-mfs',
                  requiredVersion: '1.0.4', // version of the pack
                  strictVersion: true,
                  eager: false,
                  singleton: true,
    },
  },
],