Virtual-form NPM

virtual-form

Create a virtual-dom form.

Installation

$ npm install virtual-form

Usage

const virtualForm = require('virtual-form')
const vel = require('vel')

vel(function (h) {
  return h('form.myForm', virtualForm(h, [
    'name',
    'address',
    { type: 'password', name: 'passphrase' },
    { type: 'submit', value: 'Submit' }
  ])
})

output

<form class="myForm">
  <input type="text" name="name" placeholder="name">
  <input type="text" name="address" placeholder="address">
  <input type="password" name="passphrase" placeholder="passphrase">
  <input type="submit" value="Submit">
</form>

API

formContent = virtualForm(h, opts, elements)

Create new form content. There are several types of elements that can be created:

simple

h('form', virtualForm(h, [
  'address'
]))

<form>
  <input type="text" name="address" placeholder="address">
</form>

custom

h('form', virtualForm(h, [
  { type: 'password', name: 'passphrase' }
]))

<form>
  <input type="password" name="passphrase" placeholder="passphrase">
</form>

label

h('form', virtualForm(h, { label: true }, [
  'address'
]))

<form>
  <input type="text" name="address" placeholder="address">
  <fieldset>
    <label>address</label>
    <input type="text" name="address">
  </fieldset>
</form>

FAQ

Why isn't the `form` element created too?

Creating a flat array of inputs has a significantly simpler interface than when a form element is also created. For instance, users might want to attach listeners to ev-submit or set classes.

Why does `h` need to be passed in?

Though virtual-dom is lightweight, if every package pulls in their own version, file size quickly grows. Instead it's better to pull in virtual-dom once and pass references down throughout the application.