The easiest way to embed React components in Angular 1 apps! react 18 compatible
npm install react18-react2angular
> The easiest way to embed React components in Angular 1 apps! (opposite of angular2react)
> this version can be used with React 18 and probably up
``shUsing Yarn:
yarn add react2angular react react-dom prop-types
Usage
$3
`js
import { Component } from "react";class MyComponent extends Component {
render() {
return (
FooBar: {this.props.fooBar}
Baz: {this.props.baz}
);
}
}
`$3
`js
import { react2angular } from "react2angular";angular
.module("myModule", [])
.component("myComponent", react2angular(MyComponent, ["fooBar", "baz"]));
`propTypes on your component, they will be used to compute component's bindings, and you can omit the 2nd argument:`js
...
.component('myComponent', react2angular(MyComponent))
`If
propTypes are defined and you passed in a 2nd argument, the argument will override propTypes.$3
`html
`Note: All React props are converted to AngularJS one-way bindings. If you are passing functions into your React component, they need to be passed as a function ref, rather than as an invokable expression. Keeping an existing AngularJS-style expression will result in infinite loops as the function re-evaluates on each digest loop.
Dependency Injection
It's easy to pass services/constants/etc. to your React component: just pass them in as the 3rd argument, and they will be available in your component's Props. For example:
`js
import { Component } from "react";
import { react2angular } from "react2angular";class MyComponent extends Component {
state = {
data: "",
};
componentDidMount() {
this.props.$http
.get("/path")
.then((res) => this.setState({ data: res.data }));
}
render() {
return (
{this.props.FOO}
{this.state.data}
);
}
}angular
.module("myModule", [])
.constant("FOO", "FOO!")
.component("myComponent", react2angular(MyComponent, [], ["$http", "FOO"]));
`Note: If you have an injection that matches the name of a prop, then the value will be resolved with the injection, not the prop.
Tests
`sh
npm test
``Apache2