@memberjunction/ng-react

An Angular integration library for rendering React components inside Angular applications. Provides a bridge component, script loader, and debugging tools for embedding React-based UI within the MemberJunction Angular ecosystem.

Installation

npm install @memberjunction/ng-react

Overview

This package provides a seamless bridge between Angular and React, allowing React components to be loaded and rendered within Angular templates. It handles React and ReactDOM script loading, Babel transpilation of JSX, component lifecycle management, and two-way communication between the Angular host and React guest.

flowchart TD
    subgraph Angular["Angular Host"]
        A["MJReactComponent"] -->|Props| B["ReactBridgeService"]
    end
    subgraph Bridge["Bridge Layer"]
        B --> C["ScriptLoaderService"]
        C --> D["Load React + ReactDOM + Babel"]
        B --> E["AngularAdapterService"]
    end
    subgraph React["React Guest"]
        D --> F["React Component"]
        F -->|Events| E
        E -->|Callbacks| A
    end

    style Angular fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Bridge fill:#7c5295,stroke:#563a6b,color:#fff
    style React fill:#2d8659,stroke:#1a5c3a,color:#fff

Usage

Module Import

import { ReactModule } from '@memberjunction/ng-react';

@NgModule({
  imports: [ReactModule]
})
export class YourModule {}

Basic React Component Rendering

<mj-react-component
  [ComponentCode]="reactComponentCode"
  [Props]="componentProps"
  (ComponentEvent)="handleReactEvent($event)"
  (StateChange)="handleStateChange($event)"
  (ComponentError)="handleError($event)">
</mj-react-component>

Providing React Code

reactComponentCode = `
  function MyComponent({ title, onAction }) {
    const [count, setCount] = React.useState(0);
    return (
      <div>
        <h2>{title}</h2>
        <p>Count: {count}</p>
        <button onClick={() => setCount(c => c + 1)}>Increment</button>
        <button onClick={() => onAction('submit')}>Submit</button>
      </div>
    );
  }
`;

componentProps = {
  title: 'My React Widget',
  onAction: (action: string) => console.log('React action:', action)
};

Components

| Component | Selector | Purpose | |-----------|----------|---------| | MJReactComponent | mj-react-component | Renders a React component inside Angular |

MJReactComponent Inputs

| Property | Type | Default | Description | |----------|------|---------|-------------| | ComponentCode | string | '' | JSX/React code to transpile and render | | Props | Record<string, unknown> | {} | Props passed to the React component | | EnableDebug | boolean | false | Enable debug logging |

MJReactComponent Outputs

| Event | Type | Description | |-------|------|-------------| | ComponentEvent | EventEmitter<ReactComponentEvent> | Custom events from the React component | | StateChange | EventEmitter<StateChangeEvent> | React component state changes | | ComponentError | EventEmitter<Error> | Errors during rendering or transpilation | | ComponentReady | EventEmitter<void> | React component has mounted |

Services

| Service | Purpose | |---------|---------| | ScriptLoaderService | Loads React, ReactDOM, and Babel from CDN with caching | | ReactBridgeService | Manages React component lifecycle and prop synchronization | | AngularAdapterService | Provides Angular context (router, DI) to React components |

Configuration

Debug Configuration

import { ReactDebugConfig } from '@memberjunction/ng-react';

// Enable verbose logging for development
ReactDebugConfig.enabled = true;
ReactDebugConfig.logLevel = 'verbose';

How It Works

1. ScriptLoaderService loads React, ReactDOM, and Babel scripts if not already present
2. The React component code (JSX string) is transpiled using Babel in the browser
3. ReactBridgeService creates a React root and renders the component into a DOM container
4. Props from Angular are passed to React; events from React are forwarded to Angular
5. On Angular component destruction, the React tree is properly unmounted

Dependencies

• @memberjunction/global -- Global utilities
• React and ReactDOM (loaded at runtime from CDN)
• Babel standalone (loaded at runtime for JSX transpilation)