How to share React Context with Angular

[raubel]

My React component relies on a React Context, using a Context Consumer.
Since my Angular app does not bootstrap any React component hierarchy, my Context Provider is not initialized.
Do you have any advice to have an initialized Context when my React component is rendered?

[cozmy]

Hey @raubel , this is possible but it requires a fork of react2angular. At my company, we already implemented this and it works fine.

Here's the gist of it:

1. You bootstrap React alongside AngularJS as you normally would, say in a div#react-app by using ReactDOM.render
2. The bootstrapped react app offers a way to set its state from the exterior
3. react2angular doesn't do a ReactDOM.render anymore but instead it sets the state of the bootstrapped react app with a ReactDOM.createPortal which will be put in the this.$element[0]

In the end, the bootstrapped react app will hold on its state all the render functions which setPortals on AngularJS Elements. It works fine and they all share the same context.
Hope this helps.

[seahorsepip]

I've created a library to resolve this: react2angular-shared-context

It uses portals as suggested above but is not dependant on how react2angular works.
It also handles props changes from angular and the component life cycle e.g. unmount.

[raubel]

More than three years after, I have the opportunity to come back to my problem and apply your solution. And it works like a charm!
Thank you both of you, @cozmy and @seahorsepip.

[mogzol]

I wanted something similar and stumbled upon this issue. In my case, I was using both react2angular and angular2react and had a component hierarchy like:

React Provider > AngularJS Component(s) > React Consumer

In some cases that could go several levels deep of React to AngularJS to React to AngularJS etc. The issue was that the React consumers could not read from the providers when there were AngularJS components in-between. In order to fix this, I made a new library based on react2angular and angular2react which creates portals where possible, instead of always creating new React roots. Here it is for anyone interested: react-angularjs-adapter

It should be pretty much a drop-in replacement for react2angular and angular2react, and contexts should just work. Here's an example showcasing this.