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.

import forms from 'hyperapp-forms';

..

const actions = {
  ..

  ...forms,
};

..

app(state,actions,view,document.body);

Field components

Wrap your input components with the Field decorator.

Textbox.js

import { h } from 'hyperapp';
import {Field} from "hyperapp-forms";

const Textbox = ({ input, type, name, title, disabled }) => {
  const showError = (input.touched || input.submitted) && !!input.error;
  return (
    <label>
      {title}
      <input type={type}
             name={name}
             value={input.value}
             disabled={disabled}
             onchange={input.onchange}
             onfocus={input.onfocus}
      />
      {showError && <sup>{input.error}</sup>}
    </label>
  );
};

export default Field(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 = (values, actions) => new Promise((resolve, reject) => {
  setTimeout(() => {
    if (values.username === 'test') {
      actions.login.login();
      resolve();
    }
    else {
      reject({ username: 'Not "test"!'});
    }
  }, 2000);
});

const validate = (form, name, values) => {

  let errors = null;

  const usernameInvalid = !/^t/.test(values.username);
  if (usernameInvalid) {
    if (!errors) errors = {};
    errors.username = 'not starting with t!';
  }

  const passwordInvalid = !values.password;
  if (passwordInvalid) {
    if (!errors) errors = {};
    errors.password = 'password is required!';
  }

  return errors; // if everything is valid, returns null
};


export default (state, actions) => {

  const submitting = isSubmitting(state, 'login');

  return (
    <form onsubmit={handleSubmit(state, actions, 'login', signIn)}>

      <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>
  );
});