isabella232 / angular-include-react

Include React container components into a AngularJS+Redux SPA

=============

React Include allows you to embed React container components inside an AngularJS application, synchronizing them through a Redux store. You can think of it as a lightweight alternative to ng-react, that avoids all the integration quirks by connecting the components through redux (that's framework agnostic), instead of transforming AngularJS bindings to React props.

It is built on top of the most widely adopted redux-frameworks for both libraries, ng-redux and react-redux, and follows the best practices that are also widely adopted in the javascript community regarding Redux integration with each framework.

Installation

Install via yarn:

yarn add @m/angular-include-react

or via npm:

npm i --save @m/angular-include-react

Usage

Add angularIncludeReact as a dependency to your angular application

import angular from 'angular';
import angularIncludeReact from '@m/angular-include-react';

const ngModule = angular.module('app', [
	// Add angular include react angular module as a dependency
	angularIncludeReact
]);

Register some react container components via the includeReact angular service, with an arbitrary name

import { connect } from 'react-redux';

const ReactContainerComponent = connect(/* ... */);

ngModule.run(function(includeReact) {
	includeReact.registerComponent('my-react-component', ReactContainerComponent);
});

And finally, include the components into your angular template with the include-react directive

<include-react component="my-react-component"></include-react>

Developing

To start the development server, just run:

npm install
npm start

Build Library

npm run build

Build Demo

npm run build:demo

Start development server

npm run serve

Tests

npm test

Lint

npm run lint

or

npm run lint:fix

License & Copyright

This software is copyrighted 2017 by Medallia, Inc. and released under the MIT License.