Simple [react-hook-form](https://react-hook-form.com/) wrapper for [MobX](https://mobx.js.org/).
npm install mobx-react-hook-formSimple react-hook-form wrapper for MobX.
``tsx
import { reaction } from "mobx";
import { observer } from "mobx-react-lite";
import { Form } from "mobx-react-hook-form";
const form = new Form({
resolver: valibotResolver(
v.object({
username: v.string('This field is required')
})
),
onSubmit: ({ username }) => {
console.info("nick username", username);
},
onSubmitFailed: () => {
//
},
onReset: () => {
//
}
})
const YourView = observer(() => {
return (
`
This library uses createFormControl.
So API is almost identical with result of createFormControl function call.
Differences:
- reset method renamed to resetForm
The same as setValue, but will trigger validation if form was submitted
Also you can pass undefined as value to remove value field.onChange
It should work the same as from react-hook-form's Controller
Example:
`tsx
// Update a single field
changeField("name", "value");
/ form submitted /
changeField("name", "value"); // will call setValue('name', 'value', { shouldValidate: true })
changeField("name", undefined); // removes value
`
This method is needed to pass into
as onSubmit prop, or you can call this method if you want to submit formExample:
`tsx
const form = new Form();const Component = () => {
return (
);
};
`$3
This method is needed to pass into
as onReset prop, or you can call this method if you want to reset formExample:
`tsx
const form = new Form();const Component = () => {
return (
);
};
``Want to contribute ? Follow this guide