@ngeenx/ngx-react

ngx-react

This simple Angular library integrates React components into Angular applications with ease. It is based on React createElement function and Angular directives (as standalone components). See source code here.

[!WARNING] This package is experimental. There may be possible performance problems, memory leaks and similar problems. It is your responsibility to use it.

Play on StackBlitz ⚡️

📦 Installation

Please install with peer dependencies react and react-dom using your favorite package manager.

Compatible Versions

Package Version	Angular Version
1.x.x	17.x.x
2.x.x	18.x.x

PNPM

pnpm i react react-dom @ngeenx/ngx-react

NPM

npm i react react-dom @ngeenx/ngx-react

[!NOTE] Addionaly, you can install @types/react and @types/react-dom for TypeScript support.

🚀 Usage

1. Import React Directive

Import ReactComponentDirective in your standalone component or module.

import { ReactComponentDirective } from '@ngeenx/ngx-react';

@NgModule({
  imports: [
    ...
    ReactComponentDirective
  ]
})

2. Update tsconfig.json

Add the following to your tsconfig.json file to allow importing .tsx files in Angular Project.

{
  "compilerOptions": {
    "jsx": "react",
    ...
  }
}

3. Create React Component

Create a wrapper component for your React component. We will use this component to pass props to the React component.

// ReactApp.tsx

import React, { FC, useState } from 'react';

const ReactApp: FC<any> = ({ initialInputValue }: any) => {
  const [inputValue, setInputValue] = useState(initialInputValue);

  const handleChange = (event: any) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <label htmlFor="myInput">Label:</label>

      <input
        type="text"
        id="myInput"
        value={inputValue}
        onChange={handleChange}
      />

      <p>Input Value: {inputValue}</p>
    </div>
  );
};

export default ReactApp;

4. Import in Angular Component

// app.component.ts

import { Component, NgModule } from '@angular/core';
import ReactApp from './ReactApp';

@Component({
  selector: "app-component",
  template: `<div
    [reactComponent]="ReactApp"
    [props]="props"
  ></div>`,
  standalone: true,
  imports: [ReactComponentDirective],
})
export class StandaloneComponent {
  public ReactApp: typeof ReactApp = ReactApp;
  public props = {
    initialInputValue: "Some Value"
  }
}