@kkatkus/use-form v0.0.16

To get it started, add use-form to your project:

yarn add @kkatkus/use-form

Or if you prefer using npm:

npm install @kkatkus/use-form --save

useForm<T>(config: UseFormConfig<T>, options?: UseFormOptions): UseForm<T>

Example:

interface ExampleForm extends Record<string, UseFormValue> {
 email: string;
 password: string;
 repeatPassword: string;
 age: number;
};

function Example(): ReactElement {
  
  const ageValidator = (val: UseFormValue): string | null => {
    if (val === "") {
      return null;
    }

    if (Number(val) < 18) {
      return " Not 18";
    }

    return null;
  };

  const form = useForm<ExampleForm>(
    {
      email: ['test@test.com', required('Email is required'), email()],
      password: [required('Password is required'), minLength(8)],
      repeatPassword: [required('Repeat password is required'), equal<ExampleForm>('password', 'Passwords must match')],
      age: [required('Age is required'), ageValidator],
    },
    {
      validateOn: 'change',
    }
  );

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    const { valid, errors } = form.submit();
    if (!valid) {
      return;
    }

    // when valid do something
    // ...
  };

  return (
    <form ref={form.ref} onSubmit={handleSubmit} method="post">
      <Input type="text" placeholder="Email address" name="email" />
      <Input type="password" placeholder="Password" name="password" />
      <Input type="password" placeholder="Repeat password" name="repeatPassword" />
      <Input type="number" placeholder="Age" name="age" />
      <button type="submit">Create my account</button>
    </form>
  );

• min(minVal: number, message: string): string | nullValidator that requires the control's value to be greater than or equal to the provided number.
• max(maxVal: number, message: string): string | nullValidator that requires the control's value to be less than or equal to the provided number.
• required(message: string): string | nullValidator that requires the control have a non-empty value.
• requiredTrue(message: string): string | nullValidator that requires the control's value be true. This validator is commonly used for required checkboxes.
• equal(withName: string, message: string): string | nullValidator that requires the control's value to be equal with other control's value. This validator is commonly used to compare passwords.
• email(message: string): string | nullValidator that requires the control's value pass an email validation test.
• minLength(minLengh: number, message: string): string | nullValidator that requires the length of the control's value to be greater than or equal to the provided minimum length.
• maxLength(maxLength: number, message: string): string | nullValidator that requires the length of the control's value to be less than or equal to the provided maximum length.
• pattern(pattern: string | RegExp, message: string): string | nullValidator that requires the control's value to match a regex pattern.
• numeric(message: string): string | nullValidator that requires the control's value pass numeric validation test.
• decimal(message: string): string | nullValidator that requires the control's value pass decimal validation test.