Have you ever wanted to use React components in an Angular application ? Or to start migrating an Angular app to React component-by-component ? Or simply use both at the same time ?

I developped ngx-react which allows you to do just that with ease.

It enables you to use your Angular components in React, and vice versa, quite transparently, and without boilerplate.

Setup

Just declare a bridge, somewhere in your application:

import { NgxReactBridge } from 'ngx-react';export const bridge = new NgxReactBridge()    // bridge options:    .addProvider(/** Add a global react provider here */);

Use in

Then, to use an Angular component in React, just import it like that:

const AsReact = bridge.toReact(MyAngularCommonent);// use it   <AsReact prop={whatever} />

The generated component will take as props all the @Input()s of your component, and all the @Output()s, mapped to functions. (i.e. @Output() onThing: EventEmitter<string> will be mapped to prop onThing: (event: string) => void.

Use in

To use a React component in Angular, you'll have to do a tiny bit more work... for instance if you have a React component:

function MyReactComponent(props: {  data: string;  dataChange: (evt: string) => void;}) {    // [...]}

Then magically convert it to its Angular counterpart like that:

@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   @Input()  data!: string;  @Output()  dataChange = new EventEmitter();}

(the Angular compiler doesnt allow to build dynamic components... so we have to declare them statically)

Services

Just inject Angular services in React like that:

const service = useService(MyAngularService);

Wrapping up

I'll write more about this when I have more time But please share your thought if you have some :)

More details on the ngx-react repository