QuickForm.re

module type Config = {
  type state;
  type fields;
  let lens: list((fields, state => ReForm.Value.t, (state, ReForm.Value.t) => state));
};

module Create = (Config: Config) => {
  module Form = ReForm.Create(Config);
  type fieldSchema = {
    field: Config.fields,
    label: string,
    validator: ReForm.Validation.validation(Form.values),
  };
  let component = ReasonReact.statelessComponent("QuickForm");
  let make =
      (
        ~onSubmit,
        ~onFormStateChange=?,
        ~validate=?,
        ~schema: list(fieldSchema),
        ~initialState,
        ~renderField,
        ~renderSubmit,
        ~i18n=?,
        _children,
      ) => {
    ...component,
    render: _self =>
      <Form
        onSubmit
        initialState
        ?onFormStateChange
        ?validate
        ?i18n
        schema=(
          List.map(fieldSchema => (fieldSchema.field, fieldSchema.validator), schema)
        )>
        ...(
             reform =>
               <div>
                 (
                   List.map(
                     fieldSchema =>
                       renderField(
                         ~label=fieldSchema.label,
                         ~onChange=reform.handleChange,
                         ~getErrorForField=reform.getErrorForField,
                       ),
                     schema,
                   )
                   |> Array.of_list
                   |> ReasonReact.arrayToElement
                 )
                 (renderSubmit(~onClick=reform.handleSubmit))
               </div>
           )
      </Form>,
  };
};

SignUp.re

module SignUpParams = {
  type state = {email: string, name: string};
  type fields = [ | `email | `name ];
  let lens = [
    (`email, s => s.email, (s, email) => {...s, email}),
    (`name, s => s.name, (_s, name) => {...s, name})
  ];
};

module SignUpForm = QuickReForm.Create(SignUpParams);

let component = ReasonReact.statelessComponent("SignUp");

let make = _children => {
  ...component,
  render: _self =>
    <SignUpForm
      onSubmit=(({values}) => Js.log(values))
      initialState={email: ""}
      renderField=((~onChange, ~label) => <Field onChange label placeholder/> )
      renderSubmit=((~onClick) => <Button onClick/> )
      schema=[
        { field: `email, validator: Email, label: "Email"},
        { field: `name, validator: Required, label: "Name"},
      ]
   />
}