Simple Form - Pre Release, Feedback Wanted

reasonreact

#1

Currently creating a form in Reason React is currently a bit verbose for the simple cases when you just want to follow that 80% use case. I’ve created a small library to solve my own problem with this for a production Reason web app. I’ve tried to make it flexible enough so it’s simple by default but extensible when you need to handle different use cases (like custom validations, custom error text, translating text, etc…)

I would really like to hear your honest feedback on how I can make the API better before I finish it and release it. Bear in mind that the documentation that I wrote out tonight is a bit rough.

I would also love any feedback on the programming in general and if I can improve that, as I’m fairly new to Reason and haven’t used OCaml before.

Example

open SimpleForm;

let component = ReasonReact.reducerComponent("SignupForm");

let formSchema: SimpleForm.schemaList = [
  {name: "username", label: "Username", validations: [MinLen(2), MaxLen(20)]},
  {name: "email", label: "email", validations: [Email]},
  {name: "age", label: "Age", validations: [Regex(myRegex, "Invalid Age")]},
];

let handleSubmit = (formState) =>
  Js.log(formState.inputValues);

let make = _children => {
  ...component,
  render: _self =>
    <Form schema=formSchema onSubmit=handleSubmit>
      <TextInput name="firstName" />
      <TextInput name="lastName" beforeUpdate=String.lowercase />
      <IntInput name="age" />
      <Submit text="Sign Up" />
    </Form>,
};

More docs and CRA example app here:


#2

I just pushed a demo page for the form today if anyone would like to try out the validations and various edge cases for submitting invalid data. My goal is to try and make a great user experience very easy for developers, while giving them escape hatches to customize different use cases.

There’s still some more work to be done such as cleaning up code, and casting the data to their final types (it keeps all data as strings but ensure’s they’s parseable with int_of_string for example).

https://reason-simple-form-example.netlify.com


It now has a slightly different API for inputs. Now all inputs use a simple <Input /> shell component and it will use the schema item castType to determine if it’s a <FloatInput/> or a <TextInput/>.

[%bs.raw {|require('./SimpleForm/SimpleForm.css')|}];
open SimpleForm;

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

let formSchema: list(SimpleForm_Types.schemaItem) = [
  {
    name: "firstName",
    castType: `String,
    label: "First name",
    validations: [MinLen(2)],
  },
  {
    name: "age",
    castType: `Int,
    label: "Age",
    validations: [Required]
  },
];

let handleSubmit = (~sendLoaded, form: formState) => {
  Js.log(form);
  Js.Global.setTimeout(() => sendLoaded(), 1500);
};

let make = _children => {
  ...component,
  render: _self =>
    <div className="SignupForm">
      <Form schema=formSchema onSubmit=handleSubmit>
        <Input name="firstName" />
        <Input name="age" />
        <Submit text="Update" />
      </Form>
    </div>,
};