Installation • Official Docs • Features • Usage

---

Installation

yarn add bs-reform reschema

Then add it to bsconfig.json

"bs-dependencies": [
 "bs-reform",
 "reschema"
]

Then add lenses-ppx

yarn add lenses-ppx@4.0.0 -D

And update your bsconfig.json with ppx-flags

"ppx-flags": [
 "lenses-ppx/ppx"
]

Quick guide

Show

open BsReform;

module StateLenses = [%lenses
  type state = {
    description: string,
    title: string,
    acceptTerms: bool,
  }
];

module PostAddForm = ReForm.Make(StateLenses);


[@react.component]
let make = () => {
  let form: PostAddForm.api =
    PostAddForm.use(
      ~validationStrategy=OnDemand,
      ~schema={
        PostAddForm.Validation.(Schema(
          string(~min=20, ~minError="Title needs to be greater than 20", Title)
          + nonEmpty(Description),
          + true_(~error="You must accept the terms", AcceptTerms)
        |]));
      },
      ~onSubmit=
        ({state}) => {
          Js.log2("title", state.values.description);
          Js.log2("description", state.values.description);
          Js.log2("acceptTerms", state.values.description);
          None;
        },
      ~initialState={title: "", description: "", acceptTerms: false},
      (),
    );

  <form
    onSubmit={event => {
      event->ReactEvent.Synthetic.preventDefault
      reform.submit();
    }}>

    <input
      type_="text"
      placeholder="Title"
      value=form.values.title
      onChange={event => ReactEvent.Form.target(event)##value |> handleChange(Title)}
    />

    {form.getFieldError(Title)->Belt.mapWithDefault(React.null, React.string)}

    <input
      type_="text"
      placeholder="Description"
      value=form.values.description
      onChange={event => ReactEvent.Form.target(event)##value |> handleChange(Title)}
    />

    {form.getFieldError(Description)->Belt.mapWithDefault(React.null, React.string)}

    <input
      type_="checkbox"
      value={string_of_bool(form.values.acceptTerms)}
      onChange={event =>
        ReactEvent.Form.target(event)##checked |> handleChange(AcceptTerms)
      }
    />

    {form.getFieldError(AcceptTerms)->Belt.mapWithDefault(React.null, React.string)}

    <button type_="submit" disabled={form.formState == Submitting}> "Submit"->React.string </button>
  </form>
};

Installation

yarn add bs-reform reschema

Then add it to bsconfig.json

"bs-dependencies": [
 "bs-reform",
 "reschema"
]

Then add lenses-ppx

yarn add lenses-ppx -D

And update your bsconfig.json with ppx-flags

"ppx-flags": [
 "lenses-ppx/ppx"
]

Features

• Hook API
• Schema API
• Type safe, handleChange properly infers the value of the field it is handling
• Context Provider
• Field component
• Validation strategy, OnDemand and OnChange

What this is and why

Code that deals with strongly typed forms can quickly become walls of repeated text. We created ReForm to be both deadly simple and to make forms sound good leveraging ReasonML's powerful typesytem. Even the schemas we use are nothing more than constructors built-in in the language itself with a small size footprint.

Contributing

Requisites:

• jq
• node
• esy

Setup your env with:

$ esy

Then:

yarn install

Running

Run everything in watch mode and serve the demo app with:

make serve

Alternatives

• Formality

Publishing

lerna version major|patch|minor

and then

lerna publish

Support

We usually hang out at https://discord.gg/reasonml or https://reasonml.chat so feel free to ask anything there.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Thomas Deconinck 📖 💻	Gabriel Rubens 💻 🐛 🤔 🖋 📖	Lucas Besen 🚧	Jefferson Carvalho 💻	Luiz Augusto Moratelli 💻	amythos 💻	Lalli Nuorteva 🐛
Matt 🚧	Kyle Davis 👀	Ulugbek Abdullaev 🐛	Khoa Nguyen 💻	Medson Oliveira 💻 🤔	Ana Luiza Portello Bastos 📖	Freddy Harris 🐛
arthur 📖 💻	Marcos Oliveira 📖 🎨	Celso Bonutti 💻

This project follows the all-contributors specification. Contributions of any kind welcome!