simple-example.js

// Translation of the clock example on http://reagent-project.github.io/

import {state, ui, render} from "essence"

const timerState = state({
  value: new Date(),
  color: "#f34"
})

setInterval(() => timerState.value = new Date(), 1000)

const Greeting = props => <h1>{props.children}</h1>

const Clock = ui(() => {
  const timeStr = timerState.value.toTimeString().split(" ")[0]
  return (
    <div className="example-clock" style={{color: timerState.color}}>
      {timeStr}
    </div>
  )
})

const ColorInput = ui(() => (
  <div className="color-input">
    Time color: <input type="text"  value={timerState.color}
                       onChange={(e) => timerState.color = e.target.value} />
  </div>
))

const SimpleExample = () => (
  <div>
    <Greeting>Hello world, it is now</Greeting>
    <Clock />
    <ColorInput />
  </div>
)

render(<SimpleExample />, "root")