@ngeenx/ngx-react
v2.0.0
Published
Embed React components in Angular projects
Downloads
38
Readme
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"
}
}