Common Patterns

Input and Submit Button

An element that consists of an input field and button when pressed will return the value submitted.

var bel = require('bel')
module.exports = function (onsubmit) {
  var input = bel`<input type="text" value="" />`
  return bel`<form onsubmit=${function (e) {
    e.preventDefault()
    onsubmit(input.value)
  }}>
    <label>Your Name:</label>
    ${input}
    <button type="submit">submit</button>
  </form>`
}

Onload / Onunload

There are times you need to know when your element has been inserted or removed from the DOM. Such as when attaching outside event handlers. on-load is a library to handle those events with HTML elements:

npm install on-load --save

var bel = require('bel')
var onload = require('on-load')

var modal = render(true)

function render (opened) {
  if (!opened) return ''
  var element = bel`<div class="modal">Hello!</div>`
  onload(element, function () {
    document.addEventListener('mousedown', clickedOutsideModal)
  }, function () {
    document.removeEventListener('mousedown', clickedOutsideModal)
  }) 
  return element
}

function clickedOutsideModal () {
  modal.update(render(false))
}

The above example opens a modal/popover/contextmenu and then we can check if a click occurs outside of the element to know when to hide the modal.