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.
Please install with peer dependencies react and react-dom using your favorite package manager.
| Package Version | Angular Version |
|---|---|
| 1.x.x | 17.x.x |
| 2.x.x | 18.x.x |
PNPM
pnpm i react react-dom @ngeenx/ngx-reactNPM
npm i react react-dom @ngeenx/ngx-reactNote
Addionaly, you can install @types/react and @types/react-dom for TypeScript support.
Import ReactComponentDirective in your standalone component or module.
import { ReactComponentDirective } from '@ngeenx/ngx-react';
@NgModule({
imports: [
...
ReactComponentDirective
]
})Add the following to your tsconfig.json file to allow importing .tsx files in Angular Project.
{
"compilerOptions": {
"jsx": "react",
...
}
}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;// 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"
}
}