Installation • Official Docs • Features • Usage
yarn add bs-reform reschema
Then add it to bsconfig.json
"bs-dependencies": [
"bs-reform",
"reschema"
]
Then add lenses-ppx
yarn add [email protected] -D
And update your bsconfig.json with ppx-flags
"ppx-flags": [
"lenses-ppx/ppx"
]
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>
};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"
]
- Hook API
- Schema API
- Type safe,
handleChangeproperly infers the value of the field it is handling - Context Provider
- Field component
- Validation strategy, OnDemand and OnChange
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.
Requisites:
- jq
- node
- esy
Setup your env with:
$ esy
Then:
yarn install
Run everything in watch mode and serve the demo app with:
make serve
lerna version major|patch|minor
and then
lerna publish
We usually hang out at https://discord.gg/reasonml or https://reasonml.chat so feel free to ask anything there.
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!