Nefariously Programmed Mecha

    arc-m
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    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
        }
    )

    Keywords

    none

    Install

    npm i arc-m

    DownloadsWeekly Downloads

    1

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    10.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • robinbuschmann