[Recompose] Stream Props to React Children with RxJS

You can decouple the parent stream Component from the mapped React Component by using

props.children

instead. This process involves mapping the stream to React’s

cloneElement

with the

children

then passing the

props

in manually.

We have the code below:

import React from "react"
import { render } from "react-dom"
import { Observable } from "rxjs"
import config from "recompose/rxjsObservableConfig"
import {
setObservableConfig,
componentFromStream,
createEventHandler
} from "recompose"

setObservableConfig(config)

const Counter = ({ value, onInc, onDec }) => (
<div>
<button onClick={onInc}>+</button>
<h2>{value}</h2>
<button onClick={onDec}>-</button>
</div>
)

const CounterStream = componentFromStream(
props$ => {

const { stream: onInc$, handler: onInc } = createEventHandler();
const { stream: onDec$, handler: onDec } = createEventHandler();

return props$
.switchMap(
propos => Observable.merge(
onInc$.mapTo(1),
onDec$.mapTo(-1)
)
.startWith(propos.value)
.scan((acc, curr) => acc + curr)
.map((value) => ({ value, onInc, onDec })))
.map(
Counter
)
}
);

const App = () => (
<div>
<CounterStream value={3} />
</div>
)

render(<App />, document.getElementById("root"))

Now inside we use:

<CounterStream value={4} />

We want pass child into it:

const App = () => (
<div>
<CounterStream value={3}>
<Counter />
</CounterStream>
</div>
)

So now, instead we map to Counter map in the JXS, we want to clone the child elemenet and pass down new props:

const CounterStream = componentFromStream(
props$ => {

const { stream: onInc$, handler: onInc } = createEventHandler();
const { stream: onDec$, handler: onDec } = createEventHandler();

return props$
.switchMap(
props => Observable.merge(
onInc$.mapTo(1),
onDec$.mapTo(-1)
)
.startWith(props.value)
.scan((acc, curr) => acc + curr)
.map((value) => ({ ...props, value, onInc, onDec }))
).map(props =>
cloneElement(props.children, props)
)
}
);