Rather than using Components to push streams into other Components, mapPropsStream allows you to create functions that can wrap components to create shareable behaviors across components.
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) //#endregion const Counter = props => <h1>{props.count}</h1> const CounterWithInterval = componentFromStream( props$ => props$.switchMap( props => Observable.interval(1000), (props, count) => ({count, ...props}) ) .map(Counter) ) const App = () => ( <div> <CounterWithInterval /> </div> ) render(<App />, document.getElementById("root"))
MapPropsStream allows you to create functions that will decorate your component, rather than creating a component itself. I‘m going to create an interval here using MapPropsStream.
A mapProposStream version can be 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) //#endregion const Counter = props => <h1>{props.count}</h1> const interval = mapPropsStream(props$ => props$.switchMap( props => Observable.interval(1000), (props, count) => ({ count, ...props }) )) const CounterWithInterval = interval(Counter) const App = () => ( <div> <CounterWithInterval /> </div> ) render(<App />, document.getElementById("root"))
As you can see, we take the hightlighted part as own function, wrapped with ‘mapPropsStream‘.