The easiest way to embed React components in Angular 1 apps! (opposite of angular2react)

# Using Yarn: yarn add react2angular react react-dom prop-types # Or, using NPM: npm install react2angular react react-dom prop-types --save

import{Component}from'react'classMyComponentextendsComponent{render(){return<div><p>FooBar: {this.props.fooBar}</p><p>Baz: {this.props.baz}</p></div>}}

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.

<my-componentfoo-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.

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'classMyComponentextendsComponent{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.

npm test

Apache2