coatue-oss
react2angular 
The easiest way to embed React components in Angular 1 apps! (opposite of angular2react)
Installation
# Using Yarn:
yarn add react2angular react react-dom prop-types
# Or, using NPM:
npm install react2angular react react-dom prop-types --saveUsage
1. Create a React component
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
import { react2angular } from 'react2angular'
angular
.module('myModule', [])
.component('myComponent', react2angular(MyComponent, ['fooBar', 'baz']))Note: If you defined propTypes on your component, they will be used to compute component's bindings, and you can omit the 2nd argument:
...
.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
<my-component
foo-bar="3"
baz="'baz'"
></my-component>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:
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
npm testLicense
Apache2