arc-m

Angular module for wrapping react components in order to use them directly in angular components

Usage no npm install needed!

<script type="module">
  import arcM from 'https://cdn.skypack.dev/arc-m';
</script>

README

arc-m

(arc-m stands for Angular React Component Module)

Angular module for wrapping react components in order to use them directly in angular components.

Installation

npm i arc-m

Limitation

⚠️ Doesn't work with AOT-compliler for now.

Usage

  1. Write a react component. Use prop-types to describe the component props.
import * as React from 'react';
import {string, func} from 'prop-types';

export const HelloWorld = ({name, onClick}) => (
    <div>
        <p>Hello {name}</p>
        <button onClick={onClick}>Click me!</button>
    </div>
);
HelloWorld.propTypes = {
  name: string,
  onClick: func,
};
  1. Register the react component and just use it

    a. via reference

    import {Component} from '@angular/core';
    import {registerReactComponents} from 'arc-m';
    import {HelloWorld} from './hello-world';
    
    const [helloWorld] = registerReactComponents([HelloWorld]);
    
    @Component({
       selector: 'my-ng-component',
       template: `
           <div>
               ${helloWorld(`<ARC [name]="name" (onClick)="handleOnClick"></ARC>`)}
           </div>
       `,
    })
    export class MyNgComponent {
        name = 'you';
        
        handleOnClick() {
            alert('👍');
        }
    }
    

    ARC is just a placeholder for the actual component selector of HelloWorld and can be changed. The selector of the angular component which wraps the react component is created dynamically.

    b. or with a custom selector

    import {Component} from '@angular/core';
    import {registerReactComponents} from 'arc-m';
    import {HelloWorld} from './hello-world';
    
    registerReactComponents([
        [HelloWorld, 'hello-world']
    ]);
    
    @Component({
      selector: 'my-ng-component',
      template: `
        <div>
            <hello-world [name]="name" (onClick)="handleOnClick"></hello-world>
        </div>
      `,
    })
    export class MyNgComponent {
        name = 'you';
        
        handleOnClick() {
            alert('👍');
        }
    }
    
  2. Import arc module

import {NgModule} from '@angular/core';
import {ArcModule} from 'arc-m';
import {MyNgComponent} from './my-ng.component';

@NgModule({
  imports: [
    ArcModule,
  ],
  declarations: [
    MyNgComponent,
  ]
})
export class MyNgModule {
}

registerReactComponents API

registerReactComponents(
    Array<
        object |                // React component reference
        [
            object |            // React component reference
            string              // Custom selector for wrapping angular component
        ]
    >,
    {
        placeholder: string,    // @default: "ARC" Placeholder which gets overwritten when template function is called
        selectorPrefix: string, // @default: "react-component-" Prefix of dynamically created selector of angular component
    }
)