Build UI components with reactive state. Render with react, virtual-dom or mithril.
var
hypr = require('hypr'),
react = require('react'),
virtualDom = require('virtual-dom'),
mithril = require('mithril'),
r = require('ramda');
function sum(a,b){
return a+b;
}
var counterButton = hypr.component({
name: 'counterButton',
type: 'button',
state: function(props, domEvents) {
return {
text: props.map(r.prop('text')),
count: domEvents.filter(r.eq('inc')).map(1).scan(0, sum)
}
},
props: {
onClick: 'inc'
},
children: function(state){
return [state.text, state.count].join(' ');
}
})
window.onload = function(){
hypr([react, virtualDom, mithril][Math.floor(Math.random()*3)])(
counterButton({ text: 'like' }),
document.body
);
}