ngx-reactify

> This project is currently in a beta phase and features will be added upon pull requests.
I will try to minimize breaking changes between minor version revisions but some may be made until we reach 1.0.0.

This project aims to make using Angular components in React not suck, and vice-versa. This is a dependency of my other library, ngx-xyflow.

$3

##### Install React

``bash
npm i react react-dom
`

`bash
npm i -D @types/react
`

##### Install ngx-reactify

`bash
npm i ngx-reactify
`

$3

##### Create component Interface
Next, you.
> This step is necessary as it creates Angular bindings that can be used.
> Important: You can't use the normal stylesheet imports from React. Put your styles in the component.scss file.

`ts
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import * as React from 'react';

import { ReactDemoWrappableComponent } from './react-demo'; // tsx file
import { ReactifyNgComponent } from 'ngx-reactify';

@Component({
selector: 'app-react-demo',
template: ,
styleUrls: ['./react-demo.component.scss'],
standalone: true,
encapsulation: ViewEncapsulation.None
})
export class ReactDemoComponent extends ReactifyNgComponent {
override readonly ngReactComponent = ReactDemoWrappableComponent;

@Output() onNodeClick = new EventEmitter<[MouseEvent, Node]>();
@Output() onNodeDoubleClick = new EventEmitter<[MouseEvent, Node]>();

@Input() nodeTypes?: NodeTypes | undefined;
@Input() edgeTypes?: EdgeTypes | undefined;
}
`

##### Using the component

Last, import and use ReactDemoComponent elsewhere in your application.

`ts

import { Component } from '@angular/core';
import { ReactDemoComponent } from './react-demo.component';

@Component({
selector: 'app-demo',
template:
[nodeTypes]="[1,2,3,4]"
(onNodeClick)="onNodeClick($event)"
/>
,
imports: [ ReactDemoComponent ],
standalone: true
})
export class DemoComponent {

onNodeClick(evt) {
console.log(evt)
}
}
`

$3

> :warn: Under construction.