ng-react-state


Shared React State Hooks in Angular 1

Angular 1 Directives and factory with React Hooks
to share and auto re-render state across React Components
without props passing or parent hierarchies

Install

``
$ npm install ng-react-state
`

Usage

`
$ npm run start
//=> "http://localhost:3000"
`

With ngReact you can set React components into Angular1.
But what about sharing state across all React Components?
With shared-state-hook
and ngReactState
we can now access and change the same state that will auto re-render those components without passing props.

Browser install


`html

`

https://unpkg.com/ng-react-state

Examples

Try it on JSBin

React shared State Component Angular1 Directive

`jsx harmony
const WelcomePage= props => {
const [user, setUser] = useSharedState("user");

const { name, guid, token } = user;

return (
<>
Welcome Page:
{name} {guid}
setUser({ token: Math.random() })}>Change
{token}

);
};
`

`html



`

`js
angular.module('app', ['react-state'])
.controller('helloController', function($scope) {

$scope.user = {
name: "Mike",
guid: 123455,
token: Math.random()
}

setInterval(function() {
$scope.user.token = Math.random()
// Notify subscribers.
$scope.$apply()
}, 3000)

})
//=> "!"
`




React shared State Component Angular1 Factory

`html



`

`js
angular.module('app', ['react-state'])
.controller('helloController', function($scope, reactState) {

$scope.user = {
name: "Joe",
guid: 123455,
token: Math.random()
}

reactState('user', $scope.user)
render(, document.getElementById("welcomePage"));

setInterval(function() {
$scope.user.token = Math.random()
// Notify subscribers.
$scope.$apply()
}, 3000)

})
//=> "!"
`




Api

The angular module attaches itself to angular as "react-state" and can be injected as such:

`js
angular.module("app", ["react-state"])
`

It also exposes 4 objects to the global or window ngReactState

`export {reactState, createReactProvider, reactComponent}`

1. reactState - directive

``

2. reactComponent - directive

``

3. createReactProvider - factory alias "reactState"

`returns Updater Function = reactState(Name: String, [Optional InitialValue: Props: Object], [Optional onUpdate: Function])`

Name is the name of the useSharedState` provider