[Recompose] Make Reusable React Props Streams with Lenses

Posted 2020-10-19 Answer1215

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
)