hyperapp-forms
Hyperapp form state management library
- Simple
- Small in size (3kb minified)
Heavily inspired by redux-form
Installation
npm i -S hyperapp-forms
Usage
Import
Add the imported actions object contents to the main actions object.
; const actions = ...forms; ;
Field components
Wrap your input components with the Field
decorator.
Textbox.js
;; const Textbox = { const showError = inputtouched || inputsubmitted && !!inputerror; return <label> title <input type=type name=name value=inputvalue disabled=disabled onchange=inputonchange onfocus=inputonfocus /> showError && <sup>inputerror</sup> </label> ;}; Textbox;
The attributes the Field
decorator adds to the component are:
Attribute | Type | Description |
---|---|---|
form | string | The form's name |
name | string | The field's name |
validate | function(form, name, values) : Object | A validate function to run after change |
Actions
changeAndValidate({ form, name, value, validate })
Changes a value for a certain field, also runs the validate
function and updates the sync errors accordingly.
validate
is a callback with the following structure validate(form, name, values)
(see explanation above).
touch({ form, name })
Sets the field as been touched.
startSubmit({ form })
Sets the form's status to be submitting
stopSubmit({ form, errors })
Sets the form's status to be not submitting, and apply server errors by matching field names.
Selectors
Selector | Description |
---|---|
getFormValues(state, form) |
Get an object with the form values |
isSubmitting(state, form) |
Is the form submitting |
isValid(state, form) |
Is the form valid (are there any errors) |
wasSubmitted(state, form) |
Was the form submitted at least once (useful for showing errors) |
getFieldValue(state, form, field) |
Get a certain field value |
getFieldError(state, form, field) |
Get a certain field error |
isFieldTouched(state, form, field) |
Was field touched (useful for showing errors) |
Submission and error handling
handleSubmit(state, actions, form, callback)
Use handleSubmit
in the form's onsubmit (or any button's callback, see example below),
Supply a callback function which will return a promise, which at first will start the form's submission automatically.
And once resolved or rejected will stop the form's submission.
The callback function needs to be in the following structure:
callback(values, actions) : Promise
The resolve or reject argument should be
Usage example
const signIn = { ;}; const validate = { let errors = null; const usernameInvalid = !/^t/; if usernameInvalid if !errors errors = {}; errorsusername = 'not starting with t!'; const passwordInvalid = !valuespassword; if passwordInvalid if !errors errors = {}; errorspassword = 'password is required!'; return errors; // if everything is valid, returns null}; { const submitting = ; return <form onsubmit=> <h2>Login to your account:</h2> <Textbox type="text" form="login" name="username" title="Username" disabled=submitting validate=validate/> <Textbox type="password" form="login" name="password" title="Password" disabled=submitting validate=validate/> <Checkbox form="login" name="rememberMe" title="Remember me" disabled=submitting/> <button disabled=submitting>Sign In</button> submitting && <div data-loader /> </form> ;});