Newline Proliferating Maniac

    hyperapp-forms

    0.1.0 • Public • Published

    npm version

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

    Install

    npm i hyperapp-forms

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    41.7 kB

    Total Files

    20

    Last publish

    Collaborators

    • elisherer