ReactToAngular

ReactToAngular is a simple wrapper that you can place around any React component, to be used inside any Angular application.

Installation

npm install

Demo

npm run start

Usage

// Manage all your imported React components by mapping them to a selector.
import { SomeReactComponent } from './SomeReactComponent.js';

export const ReactComponents: Array<any> = [
  {
    selector: 'reactComponentSelector',
    component: SomeReactComponent
  }
];

// Declare your imported React components in the module
import {ReactComponents} from './react-to-export';
import { createReactToAngularComponent } from 'reactWrapper';

const reactToExport = [];
ReactComponents.forEach((comp) => {
  reactToExport.push(createReactToAngularComponent(comp));
});

@NgModule({
  declarations: [
    AppComponent,
    reactToExport
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  exports: [
    reactToExport
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// Use the react component naturally as an Angular component. Just pass the [props] for React.
<reactComponentSelector [props]="{}"></reactComponentSelector>