# react2angular [](https://circleci.com/gh/coatue-oss/react2angular) [](https://www.npmjs.com/package/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))
## 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
FooBar: {this.props.fooBar}
Baz: {this.props.baz}
}
}
```
### 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
```
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
```
## License
Apache2