form-field-hooks v0.2.3

form-field-hooks (React)

stateful input field hooks built with react-hooks, for ease of validations etc. (This is experimental for now, feel free to pr fixes and upgrades.)

Attributes and return types

Input fields:

(useInput,  useSelect,  useTextArea,  useCheckbox)

Input Parameters:

Output Element:

Meta:

Note: validations work side by side with the ValidityState API and Constraint Validation API

(use options.validations instead of the validity API as it might break the behaviour of the hooks' meta).

Examples:

Import

import Form, {
  useInput,
  useSelect,
  useCheckbox,
  useTextArea
} from 'form-field-hooks';

validations and display

const InputElement = () => {
  const name = useInput(
    {value: '', name: 'passwd', type: 'password'},
    {
      // this is to set the properties of the field's `meta`
      validations: (attr) => {
        if (attr.value.length < 8) {
          return [false, 'should be atleast 8 characters long.'];
        }
        return [true, ''];
      },
      display: (attr) => {
        if (attr.className && attr.className.includes('hide-input'))
          return false;
        return true;
      }
    }, React
  );

  const { touched, dirty, show, valid } = name.meta;

  // An Example of how `meta can be useful`
  const style = {boderColor: (touched || dirty) && !valid ? 'red' : 'none'};

  return (
    <Fragment>

      {/* Form.Input takes care of not rendering the input if `show` is False */}

      <Form.Input element={name} style={style} react={React} />
      {(
        !meta.valid &&
        meta.validationMessage.length // we get to set this in `options.validations`
      ) ? <ErrorMessage msg={meta.validationMessage} /> : <></>}


      {/* Or using without `Form` */}

      {show && <input element={name} style={style} />}
    </Fragment>
  )
}

Using the Hooks

'useInput' (Input field, can be any <input /> except radio button)

const InputElements = () => {
  const name = useInput({value: 'luffy', name: 'name'}, {}, React);

  const isSaiyan = useCheckbox({name: 'isSaiyan', checked: true}, {}, React);
  const isSuper = useCheckbox({name: 'isSuper'}, {}, React);

  // Can be any Input Element
  // (text, checkbox, password, datetime
  // datetime-local, time, phone, checkbox etc)
  return (
    <Fragment>
      <Form.Input element={name} react={React} />
      <Form.Input element={isSuper} react={React} />
      <Form.Input element={isSaiyan} react={React} />
      
      {/** can also use
        * <input {...name.attr} />
        * <input {...isSuper.attr} />
        * <input {...isSaiyan.attr} />
        */}
    </Fragment>
  )
}

'useSelect' (<select /> field):

  const SelectElement = () => {
    const select = useSelect({value: '', name: 'select'}, {}, React);
    const multiselect = useSelect(
      {value: '', name: 'multiselect', multiple: true},
      {},
      React
    );

    return (
      <Fragment>
        {/*
          * Here the `defaultOption` attr will add
          * an extra null option
          * value: the value of the default option.
          * label: display value for the default option.
          * hideAfter: remove default option on any other value selection.
          */}

        <Form.Select
          element={select}
          defaultOption={{ value: '', label: '--', hideAfter: true}}
          react={React}
        >
          <option value='1'>One Piece</option>
          <option value='2'>Cowboy Bebop</option>
          <option value='3'>Death Note</option>
          <option value='4'>Naruto</option>
        </Form.Select>

        {/** can also use
          * <select {...multiselect.attr}>
          * ...
          * </select>
          */}
      </Fragment>
    )
  }

'useTextArea' (<textarea /> field)

  const TextAreaElement = () => {
    const description = useTextArea({value: '', name: 'description'}, {}, React);

    return (
      <Fragment>
        <Field.TextArea element={description} react={React} />

        {/** can also use
          * <textarea {...description.attr} />
          */}
      </Fragment>
    )
  }