https://github.com/ngeenx/ngx-react
Use React components in Angular
https://github.com/ngeenx/ngx-react
Last synced: 3 months ago
JSON representation
Use React components in Angular
- Host: GitHub
- URL: https://github.com/ngeenx/ngx-react
- Owner: ngeenx
- License: mit
- Created: 2024-03-23T01:25:25.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-23T04:56:39.000Z (about 1 year ago)
- Last Synced: 2024-04-23T12:17:10.417Z (about 1 year ago)
- Language: TypeScript
- Size: 133 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-react - Embed React components or apps into Angular projects. (Table of contents / Angular)
README
# ngx-react
This simple Angular library integrates React components into Angular applications with ease. It is based on React [createElement](https://react.dev/reference/react/createElement) function and Angular [directives](https://angular.io/guide/attribute-directives) (as [standalone components](https://angular.io/guide/standalone-component)). See source code [here](./projects/ngx-react/src/lib/directives/react-component.directive.ts).
> [!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](https://stackblitz.com/~/github.com/ngeenx/ngx-react)
## 📦 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
```bash
pnpm i react react-dom @ngeenx/ngx-react
```
NPM
```bash
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.
```typescript
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.
```json
{
"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.
```typescript
// ReactApp.tsx
import React, { FC, useState } from 'react';
const ReactApp: FC = ({ initialInputValue }: any) => {
const [inputValue, setInputValue] = useState(initialInputValue);
const handleChange = (event: any) => {
setInputValue(event.target.value);
};
return (
Label:
Input Value: {inputValue}
);
};
export default ReactApp;
```
### 4. Import in Angular Component
```typescript
// app.component.ts
import { Component, NgModule } from '@angular/core';
import ReactApp from './ReactApp';
@Component({
selector: "app-component",
template: `
`,
standalone: true,
imports: [ReactComponentDirective],
})
export class StandaloneComponent {
public ReactApp: typeof ReactApp = ReactApp;
public props = {
initialInputValue: "Some Value"
}
}
```