react-angular
Access your Angular application from within React.
Installation
npm install angular-react react prop-types react-dom
Simple component example
A typical React component receiving props
import 'ngReact'
import angular from 'angular'
import {registerReactComponent} from 'react-angular'
const app = angular.module('your-project.react', ['react'])
function ExampleReactComponent (props) {
return (
<div>
The value is: {props.value}
</div>
)
}
registerReactComponent(app, 'exampleReactComponent', ExampleReactComponent)
<example-react-component value="'Hello World'"></example-react-component>
Nesting Angular
import 'ngReact'
import angular from 'angular'
import {
registerReactComponent,
reactify
} from 'react-angular'
const app = angular.module('your-project.react', ['react'])
app.component('exampleAngularComponent', {template: 'Angular inside React'})
const ExampleAngularComponent = reactify('exampleAngularComponent')
function ExampleReactComponent () {
return (
<div>
React rending Angular
<ExampleAngularComponent />
</div>
)
}
registerReactComponent(app, 'exampleReactNestingAngular', ExampleReactComponent)
<example-react-nesting-angular>
Complex component example
A React component that depends on Angular services.
Assume a Counter
service exists and the React component requires it
import {
registerReactComponent,
compose,
$inject,
$resolve
} from 'react-angular';
const app = angular.module('your-project.react', ['react'])
const connect = compose(
$inject('Counter'),
$resolve({
count: $resolve.watch(['Counter', Counter => Counter.getCount()]),
originalCount: ['Counter', Counter => Counter.getCount()]
})
)
function ReactConter ({Counter, count, originalCount}) {
return (
<div>
<p>Count direction from CounterService: {Counter.getCount()}</p>
<p>Count from resolve: {count}</p>
<p>Original count (without watchers) from resolve: {originalCount}</p>
<button onClick={() => Counter.increment()}>+</button>
<button onClick={() => Counter.decrement()}>-</button>
</div>
)
}
registerReactComponent(app, 'reactCounter', connect(ReactCounter))
<react-counter></react-counter>