Alissa
109 lines
3.0 KiB
Markdown
109 lines
3.0 KiB
Markdown
<img alt="React to Angular: The easiest way to use React components in Angular 1" src="https://raw.githubusercontent.com/coatue-oss/react2angular/master/logo.png" width="400px" />
|
|
|
|
# react2angular [](https://www.npmjs.com/package/react18-react2angular) [](https://opensource.org/licenses/Apache2)
|
|
|
|
> The easiest way to embed React components in Angular 1 apps! (opposite of [angular2react](https://github.com/coatue-oss/angular2react))
|
|
|
|
> <b>this version can be used with React 18 and probably up</b>
|
|
|
|
## Installation
|
|
|
|
```sh
|
|
# Using Yarn:
|
|
yarn add react2angular react react-dom prop-types
|
|
|
|
# Or, using NPM:
|
|
npm install react2angular react react-dom prop-types --save
|
|
```
|
|
|
|
## Usage
|
|
|
|
### 1. Create a React component
|
|
|
|
```js
|
|
import { Component } from "react";
|
|
|
|
class MyComponent extends Component {
|
|
render() {
|
|
return (
|
|
<div>
|
|
<p>FooBar: {this.props.fooBar}</p>
|
|
<p>Baz: {this.props.baz}</p>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
### 2. Expose it to Angular
|
|
|
|
```js
|
|
import { react2angular } from "react2angular";
|
|
|
|
angular
|
|
.module("myModule", [])
|
|
.component("myComponent", react2angular(MyComponent, ["fooBar", "baz"]));
|
|
```
|
|
|
|
Note: If you defined [`propTypes`](https://facebook.github.io/react/docs/typechecking-with-proptypes.html) 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. Use it in your Angular 1 code
|
|
|
|
```html
|
|
<my-component foo-bar="3" baz="'baz'"></my-component>
|
|
```
|
|
|
|
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 (
|
|
<div>
|
|
{this.props.FOO}
|
|
{this.state.data}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
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
|
|
```
|
|
|
|
## License
|
|
|
|
Apache2
|