[Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream

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'.