Comparison & Benchmarks

import { GForm, GInput, GValidator, type GValidators } from "gform-react";
 
interface Form { email: string; password: string; confirm: string }
 
const base = new GValidator().withRequiredMessage("Required");
const validators: GValidators<Form> = {
  "*": base,
  email: new GValidator(base).withPatternMismatchMessage("Invalid email"),
  password: new GValidator(base).withMinLengthMessage("Min 8 characters"),
  confirm: new GValidator(base).withCustomValidation((input, fields) => {
    if (input.value !== fields.password.value) {
      input.errorText = "Passwords must match";
      return true; // true = error
    }
    return false;
  }),
};
 
const Row = (formKey: keyof Form, type = "text", extra = {}) => (
  <GInput
    formKey={formKey}
    type={type}
    required
    placeholder={formKey}
    {...extra}
    element={(input, props) => (
      <div>
        <input {...props} />
        {input.error && <small>{input.errorText}</small>}
      </div>
    )}
  />
);
 
export default function App() {
  return (
    <GForm<Form> validators={validators} onSubmit={(s, e) => { e.preventDefault(); /* s.toRawData() */ }}>
      {(state) => (
        <>
          {Row("email", "email", { pattern: "[^\s@]+@[^\s@]+\.[^\s@]+" })}
          {Row("password", "password", { minLength: 8 })}
          {Row("confirm", "password")}
          <button disabled={state.isInvalid}>Submit</button>
        </>
      )}
    </GForm>
  );
}

import { useForm } from "react-hook-form";
 
interface Form { email: string; password: string; confirm: string }
 
export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors, isValid },
  } = useForm<Form>({ mode: "onChange" });
  const password = watch("password");
 
  return (
    <form onSubmit={handleSubmit((values) => { /* values */ })}>
      <div>
        <input
          placeholder="email"
          {...register("email", {
            required: "Required",
            pattern: { value: /^[^@]+@[^@]+$/, message: "Invalid email" },
          })}
        />
        {errors.email && <small>{errors.email.message}</small>}
      </div>
 
      <div>
        <input
          type="password"
          placeholder="password"
          {...register("password", {
            required: "Required",
            minLength: { value: 8, message: "Min 8 characters" },
          })}
        />
        {errors.password && <small>{errors.password.message}</small>}
      </div>
 
      <div>
        <input
          type="password"
          placeholder="confirm"
          {...register("confirm", {
            required: "Required",
            validate: (v) => v === password || "Passwords must match",
          })}
        />
        {errors.confirm && <small>{errors.confirm.message}</small>}
      </div>
 
      <button disabled={!isValid}>Submit</button>
    </form>
  );
}

import { Form, Field } from "react-final-form";
 
const required = (v?: string) => (v ? undefined : "Required");
const email = (v?: string) => (/^[^@]+@[^@]+$/.test(v ?? "") ? undefined : "Invalid email");
const min8 = (v?: string) => ((v ?? "").length >= 8 ? undefined : "Min 8 characters");
const compose =
  (...fns: Array<(v?: string) => string | undefined>) =>
  (v?: string) => fns.reduce<string | undefined>((err, fn) => err || fn(v), undefined);
 
export default function App() {
  return (
    <Form
      onSubmit={(values) => { /* values */ }}
      validate={(values) => {
        const errors: Record<string, string> = {};
        if (values.confirm !== values.password) errors.confirm = "Passwords must match";
        return errors;
      }}
      render={({ handleSubmit, invalid }) => (
        <form onSubmit={handleSubmit}>
          <Field name="email" validate={compose(required, email)}>
            {({ input, meta }) => (
              <div>
                <input {...input} placeholder="email" />
                {meta.touched && meta.error && <small>{meta.error}</small>}
              </div>
            )}
          </Field>
 
          <Field name="password" type="password" validate={compose(required, min8)}>
            {({ input, meta }) => (
              <div>
                <input {...input} placeholder="password" />
                {meta.touched && meta.error && <small>{meta.error}</small>}
              </div>
            )}
          </Field>
 
          <Field name="confirm" type="password" validate={required}>
            {({ input, meta }) => (
              <div>
                <input {...input} placeholder="confirm" />
                {meta.touched && meta.error && <small>{meta.error}</small>}
              </div>
            )}
          </Field>
 
          <button disabled={invalid}>Submit</button>
        </form>
      )}
    />
  );
}

import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
 
const schema = Yup.object({
  email: Yup.string().email("Invalid email").required("Required"),
  password: Yup.string().min(8, "Min 8 characters").required("Required"),
  confirm: Yup.string()
    .oneOf([Yup.ref("password")], "Passwords must match")
    .required("Required"),
});
 
export default function App() {
  return (
    <Formik
      initialValues={{ email: "", password: "", confirm: "" }}
      validationSchema={schema}
      onSubmit={(values) => { /* values */ }}
    >
      {({ isValid, dirty }) => (
        <Form>
          <Field name="email" placeholder="email" />
          <ErrorMessage name="email" component="small" />
 
          <Field name="password" type="password" placeholder="password" />
          <ErrorMessage name="password" component="small" />
 
          <Field name="confirm" type="password" placeholder="confirm" />
          <ErrorMessage name="confirm" component="small" />
 
          <button disabled={!(isValid && dirty)}>Submit</button>
        </Form>
      )}
    </Formik>
  );
}