simple componentFromStream

componentFromStream.jsx

import React from 'react'
import { Component } from 'react'
import { BehaviorSubject } from 'rxjs'
import { createSubscription } from 'create-subscription'

export const componentFromStream = (
  myPipe,
  doRender = ({ children, ...rest }) => children(rest)
) => {
  const Sub = createSubscription({
    getCurrentValue(source) {
      return source.getValue()
    },

    subscribe(source, callback) {
      const props$ = source.pipe(myPipe)
      const sub = props$.subscribe(props => callback(props))
      return () => sub.unsubscribe()
    }
  })

  return class Comp extends Component {
    constructor(props) {
      super(props)
      this.subject = new BehaviorSubject(props)
    }
    componentDidUpdate() {
      this.subject.next(this.props)
    }
    render() {
      return <Sub source={this.subject}>{props => doRender(props)}</Sub>
    }
  }
}

Counter.jsx

const Counter = componentFromStream(props$ => {
  const { handler: increment, stream: inc$ } = createEventHandler()

  const params$ = props$.pipe(
    switchMap(props =>
      inc$
        .pipe(
          mapTo(1),
          startWith(props.initialValue || 0),
          scan((acc, inc) => acc + inc)
        )
        .pipe(map(count => ({ ...props, count, increment })))
    )
  )
  return params$
  // optional: , ({increment, count}) => <div><button onClick={increment}>{count}</button></div>
})

// defaults to render prop component
<Counter initialValue={3}>
 {({ increment, count }) => {
   return (
     <div>
       <button onClick={increment}>{count}</button>
     </div>
   )
 }}
</Counter>