π 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 :)
Jump to the sample repository for a a working sample (here on Stackblitz)
npm i ngx-react
npm i react react-dom -S
npm i @types/react @types/react-dom -D
"jsx": "react-jsx",
(in your tsconfig.json, under the "compilerOptions"
section)
"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)
At the root of you project, declare a file bridge.ts
:
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:
export const reactBridge = new NgxReactBridge();
.addDirective('focus', (focus: boolean, _, elt) => setTimeout(() => focus && elt.focus()))
You can now use React & Angular together π₯³
Suppose you have an Angular component MyAngularComponent
you would like to use in React.
In your component declaration file, just put:
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:
import {MyAngular} from './my-angular.component';
// use the component, enjoy the types !
const Other = () => <MyAngular input={'whatever'}>;
Suppose you have a React component MyReactComponent
you would like to use in Angular.
In your component declaration file, just put:
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 :
<my-react-component [(data)]="whatever"></my-react-component>
Easy
function MyReactComp() {
const service = useService(SomeAngularService); // simple, isnt it ?
}
Angular outputs are bound to callback props in react.
Meaning that:
@Ouptut() valueChange: EventEmitter<string>;
Will be bound to a react prop:
valueChange: (evt: string) => any;
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:
@Input() value: string;
@Ouptut() valueChange: EventEmitter<string>;
Then you will be able to use your component in react like that:
const value = useState("");
return <MyComonent value$={value} />;
... 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)
Currently not supported (todo):
- Integration with the Angular router
- Inject children in React that are declared in Angular.