How to use the @cycle/dom.h function in @cycle/dom
To help you get started, we’ve selected a few @cycle/dom examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Widdershin / rx-undoable / examples / counter.js View on Github 
DOM: undoableCount$.map(count => // CHANGED
h('div', [
h('button.undo', 'Undo'), // NEW
h('button.redo', 'Redo'), // NEW
h('button.subtract', 'Subtract'),
h('button.add', 'Add'),
h('p', 'Counter: ' + count)
])
)const vdom$ = O.combineLatest(counters$, childVTrees$, (counters, children) =>
h("div", [
h("ul", children.map(child => h("li", [child]))),
h("hr"),
h("h2", `Avg: ${avg(counters.map(c => c.val)).toFixed(2)}`),
h("button.reset", "Reset"),
h("button.add", "Add counter")
])).map(route => {
console.log('NAV TO', route)
switch (route.name) {
case 'users':
return h('button.home', 'home')
break
case 'home':
return h('button.hello', 'Say Hi')
break
case 'hello':
return h('h1', 'Hello ' + route.params.name)
break
case 'notFound':
return h('h1', 'Page Not Found')
break
}
})
}function view(state) {
return h('div', [
h('div', {id: 'datamap', className: 'sections'}, [
h('div', {className: 'datamap-europe'}),
h('div', {className: 'datamap-asia'}),
h('div', {className: 'datamap-us'})
]),
h('div', {style: {width: '300px', margin: 'auto'}}, [
locationsList(state.locations)
])
]);
}const view = (color) => {
const nextBg = nextColorIndex(color, increment)
const prevBg = nextColorIndex(color, -increment)
return h('div.page-wrapper',{key: `colorpage`, style: fadeInOutStyle},[
h('div.page',{},[
h('div.color-change-container.flexcenter', {style: {backgroundColor: colors[color].bg}}, [
h('h3',{style: {color: colors[color].font}},'Magic Color Changer'),
h('em',{style: {color: colors[color].font}},'Cycle (get it?) through 5 colors.'),
h('button.colorBtn.next', {}, `Go to ${colors[nextBg].bg}`),
h('button.colorBtn.prev', {}, `Back to ${colors[prevBg].bg}`),
]),
]),
])
}},
m
)
);
return addStyles(
{
background,
'z-index': zIndex,
top: '0px',
left: '0px',
position: 'fixed',
width: '100%',
height: '100%'
},
h('div.cyclejs-modal', {}, [centerHTML(processedModals)])
);
}const vdom$ = appHistory$.map(history =>
h(
'div.tab.history-tab',
history.list.isEmpty()
? [h('p.empty-prompt', 'No Action History.')]
: [
h('div.button-group', [
h(
'button.undo',
{ attrs: { disabled: history.getLastAction() === emptyAction } },
'Undo',
),
h(
'button.redo',
{ attrs: { disabled: history.getNextAction() === emptyAction } },
'Redo',
),
h('button.clear-history', 'Clear'),: state.notifications.map(n => {
return h(
'li.menu-item',
h(
'a.pointer.ng-link',
{
dataset: {
href: n.target,
},
},
[
h(
'span.db.clean-styles',
n.title
),
h(
'span.db.gray',
n.subtitle
),
h(h(
'div.form-group',
{ class: { 'has-error': error !== false } },
[
h('input.form-input', {
props: { value: email },
attrs: {
id: 'email',
type: 'email',
placeholder: 'Correo electrónico',
required: true,
},
}),
]
),
h(
'div.form-group',
{ class: { 'has-error': error !== false } },
[
h('input.form-input', {
props: { value: username },
attrs: {
id: 'username',
type: 'text',
placeholder: 'Nombre de usuario',
required: true,
},
}),
]
),
h(
'div.form-group',function PositionAndSize(state: State) {
const bbox = state.getBBox()
if (bbox == null) {
return null
}
const { x, y, width, height } = bbox
return h('div', [
Row({ label: 'Position', key: 'position' }, [
EditableField({ field: 'x', label: 'X', type: 'number', disabled: true, value: round3(x) }),
EditableField({ field: 'y', label: 'Y', type: 'number', disabled: true, value: round3(y) }),
]),
Row({ label: 'Size', key: 'size' }, [
EditableField({
field: 'width',
label: 'width',
type: 'number',
disabled: true,
value: round3(width),
}),
EditableField({
field: 'height',
label: 'Height',
type: 'number',@cycle/dom
The standard DOM Driver for Cycle.js, based on Snabbdom
