hypr

Build UI components with reactive state. Render with react, virtual-dom or mithril.

Example

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
	);
}