@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
Copy

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
Copy

Usage

Module Import

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

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

Basic React Component Rendering

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

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)
};
Copy

Components

MJReactComponent Inputs

MJReactComponent Outputs

MJReactComponent Methods

Hosts that drive a component from outside (an agent operating it through a realtime channel, a toolbar) call the standard component methods on the MJReactComponent instance: InvokeMethod(name, ...args), HasMethod(name), GetCurrentDataState(), Refresh() (the component's own refresh() when it registered one, otherwise a re-render), Print(), validate(), IsDirty(), Reset(), ScrollTo(target) and Focus(target?). Each is a no-op (or undefined/false) until the component has initialized (Initialized fires). A new Component input is a new version: the component reinitializes in place and Initialized fires again.

Services

Configuration

Debug Configuration

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

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

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)