Getting Started

Introduction#

Formst is the new way to create and handle forms. Unlike most form libraries that are UI-first, Formst is data first. It is based on MST(MobX-State-Tree). This library helps you create high-performance forms with interdependent fields within tables and add validations.

Note: Formst has peer dependencies and requires mobx, mobx-react-lite/mobx-react and mobx-state-tree.

Use yarn or npm to install this library:

# yarn
yarn add formst

# npm
npm add formst

Create a form model:
const TodoForm = createFormModel(
"TodoForm",
{
title: types.string,
description: types.string,
},
{
validation: {
title: ["required"],
description: "required",
},
}
);
Create an instance of the model:
const todoForm = TodoForm.create({
title: "",
description: "",
});
Wrap the components inside Formst and use Field API to render the fields:
export default observer(() => {
todoForm.onSubmit((formInstance: Instance<typeof todoForm>) => {
console.log(formInstance.getFormData());
formInstance.setSubmitting(false);
});

return (
<Formst formInstance={todoForm}>
<form onSubmit={todoForm.handleSubmit}>
<Field name="title" />
<ErrorMessage name="title" />

<Field name="description" />
<ErrorMessage name="description" />

<button type="submit">Submit</button>
</form>
</Formst>
);
});
Optional: If you don't like Field API, you can directly plug this to an element.
Note: For this to work, you need to wrap the entire component inside observer.
export default observer(() => {
return (
<Formst formInstance={todoForm}>
<form onSubmit={todoForm.handleSubmit}>
<input
name="title"
value={todoForm.title}
onChange={todoForm.handleChange}
onBlur={todoForm.handleBlur}
></input>
<ErrorMessage name="title" />

<Field name="description" />
<ErrorMessage name="description" />

<button type="submit">Submit</button>
</form>
</Formst>
);
});