[Recompose] Make Reusable React Props Streams with Lenses

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
)