npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, πŸ‘‹, I’m Ryan HefnerΒ  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you πŸ™

Β© 2024 – Pkg Stats / Ryan Hefner

ngx-react

v1.2.0

Published

Migrating from πŸ…°οΈ to βš›οΈ ? πŸ‘‰ Use React components in Angular, and vice versa

Downloads

28

Readme

πŸ§‘β€πŸ’» Sample

Jump to the sample repository for a a working sample (here on Stackblitz)

πŸ“ Setup

1) Prepare your Angular project

A) Install ngx-react:

npm i ngx-react

B) Install React:

npm i react react-dom -S
npm i @types/react @types/react-dom -D

C) Configure typescript so it picks up TSX:

      "jsx": "react-jsx",

(in your tsconfig.json, under the "compilerOptions" section)

D) Add the node_modules/ngx-react/src/* as included in your tsconfig.json compilation:


  "include": [
    "src",  // you should already have this one if you had an "include" section :)
    "node_modules/ngx-react/src/*" // πŸ‘ˆ  add this
    // [...]
  ],

(NB: If someone has a better solution that this, please tell me... but pre-compilling & publish the source seems to fail the angular build when installing this lib)

2) Declare your bridge

At the root of you project, declare a file bridge.ts :

import { NgxReactBridge } from "ngx-react";

// declare the bridge
export const reactBridge = new NgxReactBridge();

you can OPTINALLY declare there the directives that will be available in your react componetns globaly, such as, for instance:

export const reactBridge = new NgxReactBridge();
    .addDirective('focus', (focus: boolean, _, elt) => setTimeout(() => focus && elt.focus()))

3) Enjoy

You can now use React & Angular together πŸ₯³

Use πŸ…°οΈ Angular components in βš›οΈ React

Suppose you have an Angular component MyAngularComponent you would like to use in React.

In your component declaration file, just put:

import { reactBridge } from "./bridge";

// [...] MyAngularComponent declaration

// this will be usable in React:
export const MyAngular = reactBridge.toReact(MyAngularComponent, {
  // declares that this component accepts children
  children: true,
});

Then, you'll be able to use this in react:

import {MyAngular} from './my-angular.component';

// use the component, enjoy the types !
const Other = () => <MyAngular input={'whatever'}>;

Use βš›οΈ React components in πŸ…°οΈ Angular

Suppose you have a React component MyReactComponent you would like to use in Angular.

In your component declaration file, just put:

import { reactBridge } from "./bridge";

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

@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 (type compatibility will be ensured by Tyepscript, though)
  @Input()
  data!: string;
  @Output()
  dataChange = new EventEmitter();
}

Then, declare MyReactComponent_Angular in your ng-module, and you'll be able to use your component in Angular :

<my-react-component [(data)]="whatever"></my-react-component>

Access πŸ…°οΈ Angular services from βš›οΈ React

Easy


function MyReactComp() {
  const service = useService(SomeAngularService); // simple, isnt it ?
}

πŸ…°οΈ Angular outputs handling

Angular outputs are bound to callback props in react.

Meaning that:

@Ouptut() valueChange: EventEmitter<string>;

Will be bound to a react prop:

valueChange: (evt: string) => any;

@Input / @Outputs πŸ…°οΈ vs βš›οΈ React state hooks

When importing an Angular component in React, if your angular component has a matching @Input() and @Output() property pairs, say a value input, and valueChange output, you will notice that ngx-react will add a value$ property (name of the input, with a $ suffix) to the corresponding react type.

This property will be typed as something which is compatible with the useState() react hook. Meaning that, for if you have:

@Input() value: string;
@Ouptut() valueChange: EventEmitter<string>;

Then you will be able to use your component in react like that:

const value = useState("");

return <MyComonent value$={value} />;

... and the value state will be two-way bound with your react component !

(But of course, you can still use the value: string and valueChange: (e: string) => any props that ngx-react will have generated for you, if you prefer so)

πŸ’₯ TODO / Limits

Currently not supported (todo):

  • Integration with the Angular router
  • Inject children in React that are declared in Angular.