[Recompose] Create Stream Behaviors to Push Props in React, with Mappropsstream

Rather than using components-to-push streams into other components, allows-to- mapPropsStream create functions that can wrap com Ponents to create shareable behaviors across.

Using Componentfromstream:

Import React from "React"Import {render} from"React-dom"Import {Observable} from"Rxjs"Import config from"Recompose/rxjsobservableconfig"Import {setobservableconfig, Componentfromstream, Createeventhandler, mappropsstream} from"Recompose"setobservableconfig (config)//#endregionConst Counter= Props Const Counterwithinterval=Componentfromstream ( props$ = Props$.switchmap (Props = observable.interval (+), (props, count) = ({count, ... props})) . Map (Counter)) const APP= () + = (  <div> <counterwithinterval/> </div>) Render (<app/>, document.getElementById ("root"))

Mappropsstream allows you to create functions that'll decorate your component, rather than creating a component itself. I ' m going to create a interval here using Mappropsstream.

A Mapproposstream version can is like this:

Import React from "React"Import {render} from"React-dom"Import {Observable} from"Rxjs"Import config from"Recompose/rxjsobservableconfig"Import {setobservableconfig, Componentfromstream, Createeventhandler, mappropsstream} from"Recompose"setobservableconfig (config)//#endregionConst Counter= Props  const Interval = Mappropsstream (props$ = Props$.switchmap (Props = Observable.interval ( ), (props, count) = ({count, ... props} ))) Const Counterwithinterval= interval (Counter)const APP= () + = (  <div> <counterwithinterval/> </div>) Render (<app/>, document.getElementById ("root"))

As can see, we take the hightlighted part as own function, wrapped with ' mappropsstream '.

[Recompose] Create Stream Behaviors to Push Props in React, with Mappropsstream