microapp-loader

MicroApp Loader

A React component library for loading and rendering micro applications dynamically. Perfect for micro-frontend architectures and modular application development.

Installation

npm install microapp-loader

Usage

Basic Usage

import { MicroAppRender } from 'microapp-loader';

function App() {
  return (
    <div>
      <h1>My Application</h1>
      <MicroAppRender 
        manifestUrl="https://example.com/my-microapp/manifest.json"
        className="micro-app-container"
      />
    </div>
  );
}

Using the Hook Directly

import { useMicroApp } from 'microapp-loader';

function CustomMicroAppRenderer({ manifestUrl }: { manifestUrl: string }) {
  const { 
    partialContent, 
    cssContent, 
    loading, 
    error, 
    manifest, 
    executeJS 
  } = useMicroApp(manifestUrl);

  if (loading) return <div>Loading micro app...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      {cssContent && <style dangerouslySetInnerHTML={{ __html: cssContent }} />}
      <div dangerouslySetInnerHTML={{ __html: partialContent }} />
      <button onClick={executeJS}>Execute JavaScript</button>
    </div>
  );
}

Manifest Format

Your micro application should provide a JSON manifest with the following structure:

{
  "version": "1.0.0",
  "name": "my-microapp",
  "entry": "https://example.com/my-microapp/main.js",
  "scripts": [
    "https://example.com/my-microapp/additional-script.js"
  ],
  "styles": [
    "https://example.com/my-microapp/styles.css"
  ],
  "partials": [
    "https://example.com/my-microapp/template.html"
  ],
  "containerClass": "my-microapp-container"
}

API Reference

MicroAppRender Component

Prop	Type	Required	Description
manifestUrl	string	✅	URL to the micro app manifest JSON file
className	string	❌	CSS class name for the container

useMicroApp Hook

Returns an object with the following properties:

Property	Type	Description
partialContent	string	HTML content from the micro app
cssContent	string	CSS styles from the micro app
jsContent	string	JavaScript code from the micro app
loading	boolean	Loading state
error	string | null	Error message if any
manifest	MicroAppManifest | null	Parsed manifest data
executeJS	() => void	Function to execute the JavaScript code

TypeScript Support

This package includes full TypeScript support with exported types:

• MicroAppManifest
• UseMicroAppReturn
• MicroAppRenderProps

Next.js Usage

This package works seamlessly with Next.js applications. Simply import and use the components as you would any other React component.

License

ISC