mobx-react-hook-form 3.0.1 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +22 -33
  2. package/mobx-form/mobx-form.d.ts +31 -1
  3. package/mobx-form/mobx-form.d.ts.map +1 -1
  4. package/mobx-form/mobx-form.js +31 -1
  5. package/package.json +2 -2
package/README.md CHANGED
@@ -5,45 +5,34 @@ Simple [react-hook-form](https://react-hook-form.com/) wrapper for [MobX](https:
5
5
  ## Usage
6
6
 
7
7
  ```tsx
8
- import { reaction } from "mobx"
9
- import { MobxForm } from "mobx-react-hook-form"
10
-
11
- class YourVM {
12
- form = new MobxForm({
13
- disposer?: this.disposer,
14
- resolver: valibotResolver(
15
- v.object({
16
- username: v.string('This field is required')
17
- })
18
- ),
19
- onSubmit: ({ username }) => {
20
- console.info("nick username", username);
21
- },
22
- onSubmitFailed: () => {
23
- //
24
- },
25
- onReset: () => {
26
- //
27
- }
28
- })
29
-
30
- mount(){
31
- reaction(
32
- () => this.form.data?.username,
33
- (username) => {
34
- //
35
- }
36
- )
8
+ import { reaction } from "mobx";
9
+ import { observer } from "mobx-react-lite";
10
+ import { MobxForm } from "mobx-react-hook-form";
11
+
12
+ const form = new MobxForm({
13
+ resolver: valibotResolver(
14
+ v.object({
15
+ username: v.string('This field is required')
16
+ })
17
+ ),
18
+ onSubmit: ({ username }) => {
19
+ console.info("nick username", username);
20
+ },
21
+ onSubmitFailed: () => {
22
+ //
23
+ },
24
+ onReset: () => {
25
+ //
37
26
  }
38
- }
27
+ })
39
28
 
40
29
 
41
- const YourView = () => {
30
+ const YourView = observer(() => {
42
31
  return (
43
- <form onSubmit={yourVM.form.submit} onReset={yourVM.form.reset}>
32
+ <form onSubmit={form.submit} onReset={form.reset}>
44
33
  <Controller control={form.control} name={'username'} render={...} />
45
34
  </form>
46
35
  )
47
- }
36
+ })
48
37
 
49
38
  ```
package/mobx-form/mobx-form.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { BaseSyntheticEvent } from 'react';
2
- import { Control, createFormControl, DeepMap, DeepPartial, FieldErrors, FieldValues, FormState, UseFormClearErrors, UseFormRegister, UseFormReset, UseFormResetField, UseFormSetError, UseFormSetFocus, UseFormTrigger, UseFormUnregister } from 'react-hook-form';
2
+ import { Control, createFormControl, DeepMap, DeepPartial, FieldErrors, FieldValues, FormState, UseFormClearErrors, UseFormRegister, UseFormReset, UseFormResetField, UseFormSetError, UseFormSetFocus, UseFormSetValue, UseFormTrigger, UseFormUnregister } from 'react-hook-form';
3
3
  import { MobxFormParams } from './mobx-form.types.js';
4
4
  type FormFullState<TFieldValues extends FieldValues> = FormState<TFieldValues> & {
5
5
  values: TFieldValues;
@@ -182,6 +182,36 @@ export declare class MobxForm<TFieldValues extends FieldValues = FieldValues, TC
182
182
  * ```
183
183
  */
184
184
  setFocus: UseFormSetFocus<TFieldValues>;
185
+ /**
186
+ * Set a single field value, or a group of fields value.
187
+ *
188
+ * @remarks
189
+ * [API](https://react-hook-form.com/docs/useform/setvalue) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-setvalue-8z9hx) • [Video](https://www.youtube.com/watch?v=qpv51sCH3fI)
190
+ *
191
+ * @param name - the path name to the form field value.
192
+ * @param value - field value
193
+ * @param options - should validate or update form state
194
+ *
195
+ * @example
196
+ * ```tsx
197
+ * // Update a single field
198
+ * setValue('name', 'value', {
199
+ * shouldValidate: true, // trigger validation
200
+ * shouldTouch: true, // update touched fields form state
201
+ * shouldDirty: true, // update dirty and dirty fields form state
202
+ * });
203
+ *
204
+ * // Update a group fields
205
+ * setValue('root', {
206
+ * a: 'test', // setValue('root.a', 'data')
207
+ * b: 'test1', // setValue('root.b', 'data')
208
+ * });
209
+ *
210
+ * // Update a nested object field
211
+ * setValue('select', { label: 'test', value: 'Test' });
212
+ * ```
213
+ */
214
+ setValue: UseFormSetValue<TFieldValues>;
185
215
  /**
186
216
  * Reset at the entire form state.
187
217
  *
package/mobx-form/mobx-form.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"mobx-form.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"mobx-form.d.ts","sourceRoot":"","sources":["../../src/mobx-form/mobx-form.ts"],"names":[],"mappings":"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"}
package/mobx-form/mobx-form.js CHANGED
@@ -180,6 +180,36 @@ export class MobxForm {
180
180
  * ```
181
181
  */
182
182
  setFocus;
183
+ /**
184
+ * Set a single field value, or a group of fields value.
185
+ *
186
+ * @remarks
187
+ * [API](https://react-hook-form.com/docs/useform/setvalue) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-setvalue-8z9hx) • [Video](https://www.youtube.com/watch?v=qpv51sCH3fI)
188
+ *
189
+ * @param name - the path name to the form field value.
190
+ * @param value - field value
191
+ * @param options - should validate or update form state
192
+ *
193
+ * @example
194
+ * ```tsx
195
+ * // Update a single field
196
+ * setValue('name', 'value', {
197
+ * shouldValidate: true, // trigger validation
198
+ * shouldTouch: true, // update touched fields form state
199
+ * shouldDirty: true, // update dirty and dirty fields form state
200
+ * });
201
+ *
202
+ * // Update a group fields
203
+ * setValue('root', {
204
+ * a: 'test', // setValue('root.a', 'data')
205
+ * b: 'test1', // setValue('root.b', 'data')
206
+ * });
207
+ *
208
+ * // Update a nested object field
209
+ * setValue('select', { label: 'test', value: 'Test' });
210
+ * ```
211
+ */
212
+ setValue;
183
213
  /**
184
214
  * Reset at the entire form state.
185
215
  *
@@ -233,6 +263,7 @@ export class MobxForm {
233
263
  this.control = this.originalForm.control;
234
264
  this.register = this.originalForm.register;
235
265
  this.setFocus = this.originalForm.setFocus;
266
+ this.setValue = this.originalForm.setValue;
236
267
  this.resetForm = this.originalForm.reset;
237
268
  Object.assign(this, {
238
269
  values: this.originalForm.getValues(),
@@ -332,7 +363,6 @@ export class MobxForm {
332
363
  this[key] = value;
333
364
  }
334
365
  });
335
- console.info('update form state', errors);
336
366
  if (errors) {
337
367
  const currentErrorsSet = new Set(Object.keys(this.errors));
338
368
  const newErrors = Object.keys(errors);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mobx-react-hook-form",
3
- "version": "3.0.1",
3
+ "version": "3.0.3",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "keywords": [],
@@ -18,7 +18,7 @@
18
18
  "mobx": "^6.12.4",
19
19
  "mobx-react-lite": "^4.0.7",
20
20
  "react": "^18.3.1",
21
- "react-hook-form": "^7.56.1"
21
+ "react-hook-form": "^7.56.4"
22
22
  },
23
23
  "dependencies": {
24
24
  "disposer-util": "^2.0.0",