https://github.com/oguimbal/ngx-react
Migrating from 🅰️ to ⚛️ ? 👉 Use React components in Angular, and vice versa
https://github.com/oguimbal/ngx-react
Last synced: 5 months ago
JSON representation
Migrating from 🅰️ to ⚛️ ? 👉 Use React components in Angular, and vice versa
- Host: GitHub
- URL: https://github.com/oguimbal/ngx-react
- Owner: oguimbal
- Created: 2021-09-25T15:23:14.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-09-20T17:10:04.000Z (about 2 years ago)
- Last Synced: 2025-05-06T23:18:00.939Z (5 months ago)
- Language: TypeScript
- Size: 66.4 KB
- Stars: 14
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
ngx-react allows you to seamlessy use ⚛️ React and 🅰️ Angular components together.
👉 This package will be the a perfect match to migrate from Angular to React.
⭐ this repo if you like this package, it helps to motivate me :)
# 🧑💻 Sample
Jump to the [sample](https://github.com/oguimbal/ngx-react-sample) repository for a a working sample ([here](https://stackblitz.com/github/oguimbal/ngx-react-sample) on Stackblitz)
# 📐 Setup
## 1) Prepare your Angular project
### A) Install ngx-react:
```
npm i ngx-react
```
### B) Install React:
```
npm i react react-dom -S
npm i @types/react @types/react-dom -D
```
### C) Configure typescript so it picks up TSX:
```json
"jsx": "react-jsx",
```
(in your tsconfig.json, under the `"compilerOptions"` section)
### D) Add the `node_modules/ngx-react/src/*` as included in your `tsconfig.json` compilation:
```json
"include": [
"src", // you should already have this one if you had an "include" section :)
"node_modules/ngx-react/src/*" // 👈 add this
// [...]
],
```
**(NB: If someone has a better solution that this, please tell me... but pre-compilling & publish the source seems to fail the angular build when installing this lib)**
## 2) Declare your bridge
At the root of you project, declare a file `bridge.ts` :
```typescript
import { NgxReactBridge } from "ngx-react";
// declare the bridge
export const reactBridge = new NgxReactBridge();
```
you can OPTINALLY declare there the directives that will be available in your react componetns globaly, such as, for instance:
```typescript
export const reactBridge = new NgxReactBridge();
.addDirective('focus', (focus: boolean, _, elt) => setTimeout(() => focus && elt.focus()))
```
## 3) Enjoy
You can now use React & Angular together 🥳
# Use 🅰️ Angular components in ⚛️ React
Suppose you have an Angular component `MyAngularComponent` you would like to use in React.
In your component declaration file, just put:
```typescript
import { reactBridge } from "./bridge";
// [...] MyAngularComponent declaration
// this will be usable in React:
export const MyAngular = reactBridge.toReact(MyAngularComponent, {
// declares that this component accepts children
children: true,
});
```
Then, you'll be able to use this in react:
```typescript
import {MyAngular} from './my-angular.component';
// use the component, enjoy the types !
const Other = () => ;
```
# Use ⚛️ React components in 🅰️ Angular
Suppose you have a React component `MyReactComponent` you would like to use in Angular.
In your component declaration file, just put:
```typescript
import { reactBridge } from "./bridge";
function MyReactComponent(props: {
data: string;
dataChange: (evt: string) => void;
}) {
// [...]
}
@Directive({ selector: "my-react-component" })
export class MyReactComponent_Angular extends reactBridge.toAngular(
MyReactComponent
) {
// a bit of extra work: You will have to map the properties yourself (type compatibility will be ensured by Tyepscript, though)
@Input()
data!: string;
@Output()
dataChange = new EventEmitter();
}
```
Then, declare `MyReactComponent_Angular` in your ng-module, and you'll be able to use your component in Angular :
```html
```
# Access 🅰️ Angular services from ⚛️ React
Easy
```typescript
function MyReactComp() {
const service = useService(SomeAngularService); // simple, isnt it ?
}
```
# 🅰️ Angular outputs handling
Angular outputs are bound to callback props in react.
Meaning that:
```typescript
@Ouptut() valueChange: EventEmitter;
```
Will be bound to a react prop:
```typescript
valueChange: (evt: string) => any;
```
# @Input / @Outputs 🅰️ vs ⚛️ React state hooks
When importing an Angular component in React, if your angular component has a matching `@Input()` and `@Output()` property pairs, say a `value` input, and `valueChange` output, you will notice that ngx-react will add a `value$` property (name of the input, with a `$` suffix) to the corresponding react type.
This property will be typed as something which is compatible with the `useState()` react hook. Meaning that, for if you have:
```typescript
@Input() value: string;
@Ouptut() valueChange: EventEmitter;
```
Then you will be able to use your component in react like that:
```typescript
const value = useState("");
return ;
```
... and the `value` state will be two-way bound with your react component !
(But of course, you can still use the `value: string` and `valueChange: (e: string) => any` props that ngx-react will have generated for you, if you prefer so)
# 💥 TODO / Limits
Currently not supported (todo):
- Integration with the Angular router
- Inject children in React that are declared in Angular.