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"
  }
}