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
https://unpkg.com/ng-react-state
Examples
React shared State Component Angular1 Directive
const WelcomePage= { const user setUser = ; const name guid token = user; return <> <b>Welcome Page: </b> name guid <button =>Change</button> token </> ;};
angular//=> "!"
React shared State Component Angular1 Factory
angular//=> "!"
Api
The angular module attaches itself to angular as "react-state" and can be injected as such:
angular
It also exposes 4 objects to the global or window ngReactState
export {reactState, createReactProvider, reactComponent}
- reactState - directive
<react-state name="ScopeNameObject" [Optional Scope name Object: props=""] [Optional Scope name update Function: updater=""]></react-state>
- reactComponent - directive
<react-component name="ComponentName" props="Optional scope Object"></react-component>
- 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