import {withPropsStream} from 'react-props-stream'
import {timer} from 'rxjs'
import {map} from 'rxjs/operators'

const numbers$ = timer(0, 1000).pipe(map(n => ({number: n})))

const MyStreamingComponent = withPropsStream(
  numbers$,
  props => <div>The number is {props.number}</div>
)

import {createEventHandler} from 'react-props-stream'
import {map, distinctUntilChanged, switchMap} from 'rxjs/operators'

const FetchComponent = withPropsStream(
  props$ =>
    props$.pipe(
      map(props => props.url),
      distinctUntilChanged(),
      switchMap(url => fetch(url).then(response => response.text())),
      map(responseText => ({responseText}))
    ),
  props => <div>The result was: {props.responseText}</div>
)

// Usage
ReactDOM.render(<FetchComponent url="http://example.com" />, document.getElementById('myid'))

import {streamingComponent} from 'react-props-stream'
import {map, distinctUntilChanged, switchMap} from 'rxjs/operators'

const FetchComponent = streamingComponent<{url: string}>(props$ =>
  props$.pipe(
    map(props => props.url),
    distinctUntilChanged(),
    switchMap(url => fetch(url).then(response => response.text())),
    map(responseText => <div>The result was: {responseText}</div>)
  )
)

import {WithObservable} from 'react-props-stream'
import {timer} from 'rxjs'
import {map} from 'rxjs/operators'

const numbers$ = timer(0, 1000).pipe(map(n => ({number: n})))

function MyComponent(props)  {
  return (
    <WithObservable observable={numbers$}>
      {num => <div>The number is {num}</div>}
    </WithObservable>
  )
}