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

📦 Installation

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

PNPM

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

NPM

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

🚀 Usage

1. Import React Directive

Import ReactComponentDirective in your standalone component or module.

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

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

2. 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> = () => {
  const [inputValue, setInputValue] = useState('');

  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;

Basic Usage

// 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: any = {}
}