Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.