DEV Community

artydev
artydev

Posted on • Updated on

Mithril, unsual use...follow

Following my previous post, a better sample

/* @jsx m */

const stream  = window.m.stream
const user = stream()
const started = stream(false)
started.map(x => x && m.redraw())

async  function fetchUser () {
  const data = await m.request("https://randomuser.me/api/")
  user(data.results[0])
  started(true)
}

function viewUser () {
  const ruser = user() 
  return (
    <div>
      <img src = {ruser.picture.medium} />           
      <h4>Hy {ruser.name.first}</h4>   
    </div>
  )
}

function Comp () {
  return (
    <div oninit = {fetchUser}> {
      started() ? viewUser() : <h4>fetching...</h4> }   
    </div>
  ) 
}

m.mount(document.body, { view : Comp })
Enter fullscreen mode Exit fullscreen mode

You can test it here : MithtrilExp

Top comments (0)