@newfold/mfe-provider NPM

@newfold/mfe-provider

<MFEProvider /> is a React Library for Jarvis Micro-Frontend (MFE) Applications that is designed to streamline the technology stack and solution architecture as the number of MFE applications grows.

Features

MUI
Error Boundary
i18n and l10n support
React Query
DataDog (RUM and Logging)
Host application & MFE context provider

Using the Library

Installation

$ yarn add "@newfold/mfe-provider"
# installing...

Wrapping your React application

import MFEProvider from '@newfold/mfe-provider';

const MyApp = () => (
  <MFEProvider>
    <App />
  </MFEProvider>
);

Using context

import { useMFEContext } from '@newfold/mfe-provider';

const Component = () => {
  const mfeContext = useMFEContext();

  // log context to see what values are available
  console.log('mfeContext', mfeContext);

  return (
    <h1>Hello world!</h1>
  );

Configuration

Prop	Type	Description
children	oneOfType(node, func)
history	shape({})
hostingId	number
basename	string
hasErrorBoundary	bool
errorBoundaryConfig	shape({})
hasI18N	bool
i18nConfig	shape({})
hasDataDog	bool
dataDogConfig	shape({})
hasReactQuery	bool
reactQueryConfig	shape({})
hasMUI	bool
muiConfig	shape({})
hasReactSuspense	bool
reactSuspenseConfig	shape({})
hasReactRouterDom	bool
reactRouterDomConfig	shape({})

Developing and contributing to MFE Provider

Building

Run nx build mfe-provider to build the lib into /dist/libs/mfe-provider.

Publishing

Navigate to the /dist/libs/mfe-provider directory, then use yarn publish to publish. Ensure the correct version is provided and that the repo is up-to-date with the correct version as well in the package.json file.