@chloe463/use-form-group v0.3.1

use-form-group

Overview

A react hooks library to control form value state. This library is inspired by Angular's ReactiveFormModule.

Usage

useFormGroup

You can build form state with useFormGroup. To initialize it, pass values, validators(optional) and lazyInit function (optional) which initializes values asynchronously.

import React from "react";
import { FormGroupProvider, Validators, useFormGroup } from "@chloe463/use-form-group";

const AwesomeFormComponent = () => {
  const formGroup = useFormGroup({
    values: {
      username: "",
    },
    validators: {
      username: [Validators.required, Validators.maxLength(3)],
    },
  });

  return (
    <FormGroupProvider formGroup={formGroup}>
      <form>
        <button onClick={/* do something */} disabled={formGroup.status === "INVALID"}>
          Submit
        </button>
        <TextField />
      </form>
    </FormGroupProvider>
  );
};

useFormControl

To use value and update it, you can use useFormControl. With useFormControl you will get...

import React from "react";
import { useFormControl } from "@chloe463/use-form-group";

const TextField = () => {
  const { value, setValue, errors, touched, pristine, dirty } = useFormControl("text");
  return (
    <>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
    </>
  );
};

useFormArray

If you want to manage an array of value, useFormArray would help you. It wraps useFormControl, so you can use every variable and function which is returned from useFormControl. Additionally, it provides addOrRemoveValue and hasValue.

const CheckboxField: React.FC<Props> = ({ checkboxes }) => {
  const {
    value,
    setValue,
    addOrRemoveValue,
    hasValue,
    errors,
    inputRef,
    selectRef: _selectRef,
    textareaRef: _textareaRef,
    ...meta
  } = useFormArray("checkbox");
  return (
    <>
      {checkboxes.map(checkbox => {
        return (
          <label key={checkbox.value}>
            <input
              type="checkbox"
              value={checkbox.value}
              checked={hasValue(checkbox.value)}
              onChange={e => addOrRemoveValue(e.target)}
              ref={inputRef}
            />
            <span>{checkbox.value}</span>
          </label>
        );
      })}
    </>
  );
};