Snabbdom form helpers
Demo
npm install snabbdom-form-helpers
Provides helpers for the following form elements:
- checkbox (handles setting unique
idfor input andforattr for label) - credit card input (uses creditcards package to format number and set card type to
data-credit-cardattribute) - phone number input (formats
123456780to123 456 7890) - radios (handles setting unique
idfor input andforattr for label) - select
checkBox
- handles setting unique
idfor input andforattr for label
takes an object with the following properties:
| key | type | explanation | required |
|---|---|---|---|
| value | String | value of input when checkbox is checked | true |
| label | String | label text | true |
| name | String | value of name property of the input | false |
| checked | Boolean | whether the checkbox is checked | false |
| classes | String | string of class names ('.mt-2.color-red') |
false |
| cb | Function | callback function that gets called on change event |
false |
var fh = require('snabbdom-form-helpers')
h('div', [
h('label', 'Checkbox')
, fh.checkBox({
name: 'anonymous'
, value: 't'
, label: 'Donate anonymously?'
})
])cardInput
- uses creditcards package to format number and set card type to
data-credit-cardattribute
takes an object with the following properties:
| key | type | explanation | required |
|---|---|---|---|
| name | String | value of name property of the input | false |
| value | String | value of input | false |
| placeholder | String | placeholder text | false |
| classes | String | string of class names ('.mt-2.color-red') |
false |
| cb | Function | callback function that gets called on input event |
false |
var fh = require('snabbdom-form-helpers')
h('div', [
h('label', 'Credit card')
, fh.cardInput({
name: 'card'
, value: '4242424242424242'
, placeholder: 'Credit card number'
})
])phoneInput
- simply formats a 10 digit number into three parts (formats
123456780to123 456 7890) - does not do any validation
- meant only for US phone numbers
takes an object with the following properties:
| key | type | explanation | required |
|---|---|---|---|
| name | String | value of name property of the input | false |
| placeholder | String | placeholder text | false |
| value | String | value of input | false |
| classes | String | string of class names ('.mt-2.color-red') |
false |
| cb | Function | callback function that gets called on input event |
false |
var fh = require('snabbdom-form-helpers')
h('div', [
h('label', 'Phone number')
, fh.phoneInput({
name: 'phone'
, value: '1234567890'
, placeholder: 'Credit card number'
})
])radios
- handles setting unique
idfor input andforattr for label
takes an object with the following properties:
| key | type | explanation | required |
|---|---|---|---|
| name | String | value of name property of the input | true |
| options | Array of objects | [{label: 'cash', value: 'money'}] the value key is optional | true |
| selected | String | will check an input if the selected string matches the input's value | false |
| classes | String | string of class names ('.mt-2.color-red') |
false |
| cb | Function | callback function that gets called on change event |
false |
var fh = require('snabbdom-form-helpers')
h('div', [
h('label', 'Radios')
, fh.radios({cb: cb, selected: 'check', name: 'payment-method', options: [
{label: 'check'}
, {label: 'credit card', value: 'card'}
, {label: 'cash', value: 'money'}
]})select
takes an object with the following properties:
| key | type | explanation | required |
|---|---|---|---|
| name | String | value of name property of the select | false |
| options | Array of strings or objects | a select option will be created for each of these option strings or objects | true |
| selected | String | will select an option if the selected string matches the option's value | false |
| placeholder | String | placeholder option | false |
| classes | String | string of class names ('.mt-2.color-red') |
false |
| disabled | Function | function that disables an option if the return value is truthy | false |
| cb | Function | callback function that gets called on change event |
false |
var fh = require('snabbdom-form-helpers')
var disabled = function(option) {return option ==='mail'}
h('div', [
h('label', 'Select')
, fh.select({cb: cb, disabled: disabled, selected: 'phone', placeholder: 'Contact preference', name: 'contact-preference', options: [
'SMS', {value: 'phone', label: 'Phone number'}, 'email', 'mail']})
])