react-in-angular

Installation

npm install -S react-in-angular react react-dom

Note: react and react-dom are peer dependencies and are needed to run react-in-angular

Usage

Create your React component:

constClickMeButton=(props)=>{return(<buttontype={props.type}onClick={props.onClick}>
Click me!
</button>)};exportdefaultClickMeButton;

Wrap it with react-in-angular and register it as AngularJS component:

import{toComponent}from'react-in-angular';importClickMeButtonfrom'./ClickMeButton';// Define the bindings for ClickMeButtonconstbindings={type: '<',onClick: '&'};angular.module('app.button').component('clickMeButton',toComponent()(ClickMeButton,bindings));

In your angular controller:

functionController(){this.type='button';this.onClick=($event)=>{$event.preventDefault();alert('Clicked!');};}

In your angular template:

<click-me-buttontype="$ctrl.type" on-click="$ctrl.onClick($event)"></click-me-button>

Supported bindings

Because of compatibility with React's one-way data flow only two bindings are supported:

• < – for data
• & – for functions

Internally all bindings of type & are handled like event handlers. Because of that all events which are passed to the event handlers will be wrapped in a scope where your event is accessible as $event. In Angular you can pass $event to your event handler:

<click-me-buttonon-click="$ctrl.onClick($event)"></click-me-button>

Note: The property name $event was advised in AngularJS Styleguide by Todd Motto and is described in the documentation of AngularJS.

Decorators

With decorators you have the option to provide contexts for your React components or wrap it with logic which is provided by your AngularJS application.

How to write a decorators

Decorators are simple AngularJS factory functions which return a decorate function. The decorate function takes a render function as argument which will be used to render the actual component.

An example decorator called ReduxDecorator which reuses the Redux store of $ngRedux:

import{Provider}from'react-redux';functionReduxDecorator($ngRedux){returnfunctiondecorate(render){return(<Providerstore={$ngRedux}>{render()}</Provider>);};}exportdefaultReduxDecorator;