1. 程式人生 > >[Recompose] Make Reusable React Props Streams with Lenses

[Recompose] Make Reusable React Props Streams with Lenses

reac possible ndb back rop name person checkout ppr

If you hard-code a stream of props to target a specific prop, it becomes impossible to reuse that stream with any other components. Configuring your props stream with lenses will allow you to reuse your stream with any React component.

Checkout: lensProp, lensPath.

const personNameLens = R.lensPath
([
"person", "name" ]) const typewriter = lens => mapPropsStream(props$ => props$.switchMap( props => Observable.zip( Observable.from(R.view(lens, props)), Observable.interval(100), letter => letter ).scan((acc, curr)
=> acc + curr), (props, name) => R.set(lens, name, props) ) )

const DateDisplay = props => <h1>{props.date}</h1>
const dateLens = R.lensProp("date")
const DateTypewriter = typewriter(dateLens)(
  DateDisplay
)

[Recompose] Make Reusable React Props Streams with Lenses