rxjs-react-component
A component allowing you to change state using observables
Install
npm install rxjs-react-component
Depends on React and rxjs
Howto
By convention all methods defined with a $
at the end will expose an observable instead. If you return the observable it is expected to map to an object. This object will be run with this.setState(mappedObservableObject)
and cause a render on the component.
;; { superprops; thisstate = count: 0; } { return observable; } { return <div> <h1>Hello </h1> <button onClick=thisonClick$>Increase</button> </div> ; }
You can create complex state changes by merging multiple observables.
;;; { superprops; thisstate = count: 0; } { const increase$ = observable; const delayedIncrease$ = observable; return Observable; } { return <div> <h1>Hello </h1> <button onClick=thisonClick$>Increase</button> </div> ; }
You can also hook on to life-cycle hooks using the same naming convention. Not all of these should cause a new render of the component and you handle that by just not returning the observable.
;; { observable; } { return <div> <h1>Hello world</h1> </div> ; }