ReasonML/BuckleScript bindings for Formik

Formik.re

[@bs.module "formik"]
[@react.component]
external make: (
  ~initialValues: Js.t('a),
  ~validate: (. Js.t('a)) => Js.Dict.t(string),
  ~onSubmit: (. Js.t('a), {. "setSubmitting": [@bs.meth] bool => unit }) => unit,
  ~children: (. {. "isSubmitting": bool }) => React.element,
) => React.element = "Formik";

module Form = {
  [@bs.module "formik"]
  [@react.component]
  external make: (~children: React.element) => React.element = "Form";
};

module Field = {
  [@bs.module "formik"]
  [@react.component]
  external make: (~_type: string, ~name: string) => React.element = "Field";
};

module ErrorMessage = {
  [@bs.module "formik"]
  [@react.component]
  external make: (~name: string, ~component: string) => React.element = "ErrorMessage";
};

Index.re

let initialValues = { "email": "", "password": "" };

let validate = (. values) => {
  let errors = Js.Dict.empty();

  if (values##email == "")
    Js.Dict.set(errors, "email", "Required")
  else if (!Js.Re.test_([%re "/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i"], values##email))
    Js.Dict.set(errors, "email", "Invalid email address");

  errors;
};

module F = Formik;

let make() =
  <F
    initialValues
    validate
    onSubmit={(. values, setters) =>
      ignore(Js.Global.setTimeout(
        () => {
          Js.log(values);
          setters##setSubmitting(false);
        },
        400))}>
    {(. props) =>
      <F.Form>
        <F.Field _type="email" name="email" />
        <F.ErrorMessage name="email" component="div" />
        <F.Field _type="password" name="password" />
        <F.ErrorMessage name="password" component="div" />
        <button type_="submit" disabled={props##isSubmitting}>
          "Submit"->React.string
        </button>
      </F.Form>}
  </F>;