Skip to content
Reasonably making forms sound good 🛠
Branch: master
Clone or download
fakenickels Merge pull request #83 from Astrocoders/dependabot/npm_and_yarn/websi…
…te/stringstream-0.0.6

chore(deps): bump stringstream from 0.0.5 to 0.0.6 in /website
Latest commit 73c3109 Jun 21, 2019

README.md

ReForm.re

Build Status

Reasonably making forms sound good

Installation

yarn add bs-reform

Then add it to bsconfig.json

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

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.

Usage with hooks

Checkout packages/demo/src/PostAddNext.re also

module StateLenses = [%lenses
  type state = {
    description: string,
    title: string,
    acceptTerms: bool,
  }
];
module PostAddForm = ReFormNext.Make(StateLenses);

[@react.component]
let make = () => {
  let {state, submit, getFieldState, handleChange}: PostAddForm.api =
    PostAddForm.use(
      ~schema={
        PostAddForm.Validation.Schema([|
          Custom(
            Title,
            values =>
              Js.String.length(values.title) > 20
                ? Error("Keep it short!") : Valid,
          ),
          Custom(
            Description,
            values =>
              values.description == "" ? Error("Can't be empty") : Valid,
          ),
          Custom(
            AcceptTerms,
            values =>
              values.acceptTerms == false
                ? Error("You must accept all the terms") : Valid,
          ),
        |]);
      },
      ~onSubmit=
        ({state}) => {
          mutate(
            ~variables=
              PostAddMutationConfig.make(
                ~title=state.values.title,
                ~description=state.values.description,
                (),
              )##variables,
            (),
          )
          |> Js.Promise.then_(result =>
               setResult(_ => Some(result)) |> Js.Promise.resolve
             )
          |> ignore;

          None;
        },
      ~initialState={title: "", description: "", acceptTerms: false},
      (),
    );
};

Alternatives

Support

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

You can’t perform that action at this time.