react, recompose, xstream

index.js

import { componentFromStream, setObservableConfig } from 'recompose'
import xstreamConfig from 'recompose/xstreamObservableConfig'
import { h, p, div, h1, h2 } from 'react-hyperscript-helpers'
import { render } from 'react-dom'
import xs from 'xstream'

setObservableConfig(xstreamConfig)

const Users = componentFromStream((props$) => {
  const vdom$ = props$
    .map(({ ids }) => {
      return div(ids.map((id) => h(UserContainer, { id })))
    })

  return vdom$
})

const UserContainer = componentFromStream((props$) => {
  const response$ = props$
    .map(({ id }) => request(getUserUrl(id)))
    .flatten()

  const vdom$ = response$
    .startWith(null)
    .map((user) => {

      if (user) {
        return h(User, { user })
      } else {
        return p('Loading ...')
      }
    })

  return vdom$
})

const User = ({ user }) => div([
  h1(`${user.name}, also called ${user.username}`),
  h2(user.email),
  p(user.company.bs)
])

function request (url) {
  return xs.fromPromise(fetch(url).then((res) => res.json()))
}

function getUserUrl (id) {
  return `http://jsonplaceholder.typicode.com/users/${id}`
}

render(
  h(Users, { ids: [1, 2, 3, 4, 5, 10] }),
  document.body
)