react-hook-form 7.25.3 → 7.26.0

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 (30) hide show
  1. package/README.md +375 -306
  2. package/dist/controller.d.ts +42 -0
  3. package/dist/controller.d.ts.map +1 -1
  4. package/dist/index.cjs.js +1 -1
  5. package/dist/index.cjs.js.map +1 -1
  6. package/dist/index.esm.mjs +247 -9
  7. package/dist/index.esm.mjs.map +1 -1
  8. package/dist/index.umd.js +1 -1
  9. package/dist/index.umd.js.map +1 -1
  10. package/dist/logic/createFormControl.d.ts.map +1 -1
  11. package/dist/logic/validateField.d.ts.map +1 -1
  12. package/dist/types/controller.d.ts +21 -0
  13. package/dist/types/controller.d.ts.map +1 -1
  14. package/dist/types/fieldArray.d.ts +172 -9
  15. package/dist/types/fieldArray.d.ts.map +1 -1
  16. package/dist/types/form.d.ts +371 -0
  17. package/dist/types/form.d.ts.map +1 -1
  18. package/dist/useController.d.ts +24 -0
  19. package/dist/useController.d.ts.map +1 -1
  20. package/dist/useFieldArray.d.ts +39 -2
  21. package/dist/useFieldArray.d.ts.map +1 -1
  22. package/dist/useForm.d.ts +29 -0
  23. package/dist/useForm.d.ts.map +1 -1
  24. package/dist/useFormContext.d.ts +60 -0
  25. package/dist/useFormContext.d.ts.map +1 -1
  26. package/dist/useFormState.d.ts +30 -0
  27. package/dist/useFormState.d.ts.map +1 -1
  28. package/dist/useWatch.d.ts +77 -0
  29. package/dist/useWatch.d.ts.map +1 -1
  30. package/package.json +8 -8
package/dist/useFormState.d.ts CHANGED
@@ -1,4 +1,34 @@
1
1
  import { FieldValues, UseFormStateProps, UseFormStateReturn } from './types';
2
+ /**
3
+ * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
4
+ *
5
+ * @remarks
6
+ * [API](https://react-hook-form.com/api/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)
7
+ *
8
+ * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}
9
+ *
10
+ * @example
11
+ * ```tsx
12
+ * function App() {
13
+ * const { register, handleSubmit, control } = useForm({
14
+ * defaultValues: {
15
+ * firstName: "firstName"
16
+ * }});
17
+ * const { dirtyFields } = useFormState({
18
+ * control
19
+ * });
20
+ * const onSubmit = (data) => console.log(data);
21
+ *
22
+ * return (
23
+ * <form onSubmit={handleSubmit(onSubmit)}>
24
+ * <input {...register("firstName")} placeholder="First Name" />
25
+ * {dirtyFields.firstName && <p>Field is dirty.</p>}
26
+ * <input type="submit" />
27
+ * </form>
28
+ * );
29
+ * }
30
+ * ```
31
+ */
2
32
  declare function useFormState<TFieldValues extends FieldValues = FieldValues>(props?: UseFormStateProps<TFieldValues>): UseFormStateReturn<TFieldValues>;
3
33
  export { useFormState };
4
34
  //# sourceMappingURL=useFormState.d.ts.map
package/dist/useFormState.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useFormState.d.ts","sourceRoot":"","sources":["../src/useFormState.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,WAAW,EAEX,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAIjB,iBAAS,YAAY,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EAClE,KAAK,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,GACtC,kBAAkB,CAAC,YAAY,CAAC,CAoDlC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
1
+ {"version":3,"file":"useFormState.d.ts","sourceRoot":"","sources":["../src/useFormState.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,WAAW,EAEX,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAIjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,iBAAS,YAAY,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EAClE,KAAK,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,GACtC,kBAAkB,CAAC,YAAY,CAAC,CAoDlC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
package/dist/useWatch.d.ts CHANGED
@@ -1,10 +1,51 @@
1
1
  import { Control, DeepPartialSkipArrayKey, FieldPath, FieldPathValue, FieldPathValues, FieldValues, UnpackNestedValue } from './types';
2
+ /**
3
+ * Subscribe to the entire form values change and re-render at the hook level.
4
+ *
5
+ * @remarks
6
+ *
7
+ * [API](https://react-hook-form.com/api/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
8
+ *
9
+ * @param props - defaultValue, disable subscription and match exact name.
10
+ *
11
+ * @example
12
+ * ```tsx
13
+ * const { watch } = useForm();
14
+ * const values = useWatch({
15
+ * control,
16
+ * defaultValue: {
17
+ * name: "data"
18
+ * },
19
+ * exact: false,
20
+ * })
21
+ * ```
22
+ */
2
23
  export declare function useWatch<TFieldValues extends FieldValues = FieldValues>(props: {
3
24
  defaultValue?: UnpackNestedValue<DeepPartialSkipArrayKey<TFieldValues>>;
4
25
  control?: Control<TFieldValues>;
5
26
  disabled?: boolean;
6
27
  exact?: boolean;
7
28
  }): UnpackNestedValue<DeepPartialSkipArrayKey<TFieldValues>>;
29
+ /**
30
+ * Custom hook to subscribe to field change and isolate re-rendering at the component level.
31
+ *
32
+ * @remarks
33
+ *
34
+ * [API](https://react-hook-form.com/api/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
35
+ *
36
+ * @param props - defaultValue, disable subscription and match exact name.
37
+ *
38
+ * @example
39
+ * ```tsx
40
+ * const { watch } = useForm();
41
+ * const values = useWatch({
42
+ * control,
43
+ * name: "fieldA",
44
+ * defaultValue: "default value",
45
+ * exact: false,
46
+ * })
47
+ * ```
48
+ */
8
49
  export declare function useWatch<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: {
9
50
  name: TFieldName;
10
51
  defaultValue?: FieldPathValue<TFieldValues, TFieldName>;
@@ -12,6 +53,29 @@ export declare function useWatch<TFieldValues extends FieldValues = FieldValues,
12
53
  disabled?: boolean;
13
54
  exact?: boolean;
14
55
  }): FieldPathValue<TFieldValues, TFieldName>;
56
+ /**
57
+ * Custom hook to subscribe to field change and isolate re-rendering at the component level.
58
+ *
59
+ * @remarks
60
+ *
61
+ * [API](https://react-hook-form.com/api/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
62
+ *
63
+ * @param props - defaultValue, disable subscription and match exact name.
64
+ *
65
+ * @example
66
+ * ```tsx
67
+ * const { watch } = useForm();
68
+ * const values = useWatch({
69
+ * control,
70
+ * name: ["fieldA", "fieldB"],
71
+ * defaultValue: {
72
+ * fieldA: "data",
73
+ * fieldB: "data"
74
+ * },
75
+ * exact: false,
76
+ * })
77
+ * ```
78
+ */
15
79
  export declare function useWatch<TFieldValues extends FieldValues = FieldValues, TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[]>(props: {
16
80
  name: readonly [...TFieldNames];
17
81
  defaultValue?: UnpackNestedValue<DeepPartialSkipArrayKey<TFieldValues>>;
@@ -19,5 +83,18 @@ export declare function useWatch<TFieldValues extends FieldValues = FieldValues,
19
83
  disabled?: boolean;
20
84
  exact?: boolean;
21
85
  }): FieldPathValues<TFieldValues, TFieldNames>;
86
+ /**
87
+ * Custom hook to subscribe to field change and isolate re-rendering at the component level.
88
+ *
89
+ * @remarks
90
+ *
91
+ * [API](https://react-hook-form.com/api/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
92
+ *
93
+ * @example
94
+ * ```tsx
95
+ * // can skip passing down the control into useWatch if the form is wrapped with the FormProvider
96
+ * const values = useWatch()
97
+ * ```
98
+ */
22
99
  export declare function useWatch<TFieldValues extends FieldValues = FieldValues, TFieldNames extends FieldPath<TFieldValues>[] = FieldPath<TFieldValues>[]>(): FieldPathValues<TFieldValues, TFieldNames>;
23
100
  //# sourceMappingURL=useWatch.d.ts.map
package/dist/useWatch.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useWatch.d.ts","sourceRoot":"","sources":["../src/useWatch.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,OAAO,EACP,uBAAuB,EACvB,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EAEX,iBAAiB,EAElB,MAAM,SAAS,CAAC;AAIjB,wBAAgB,QAAQ,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,EAAE;IACP,YAAY,CAAC,EAAE,iBAAiB,CAAC,uBAAuB,CAAC,YAAY,CAAC,CAAC,CAAC;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,iBAAiB,CAAC,uBAAuB,CAAC,YAAY,CAAC,CAAC,CAAC;AAC7D,wBAAgB,QAAQ,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,UAAU,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EACpE,KAAK,EAAE;IACP,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,cAAc,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAC7C,wBAAgB,QAAQ,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,WAAW,SAAS,SAAS,SAAS,CAAC,YAAY,CAAC,EAAE,GAAG,SAAS,SAAS,CAAC,YAAY,CAAC,EAAE,EAC3F,KAAK,EAAE;IACP,IAAI,EAAE,SAAS,CAAC,GAAG,WAAW,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,iBAAiB,CAAC,uBAAuB,CAAC,YAAY,CAAC,CAAC,CAAC;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,eAAe,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;AAC/C,wBAAgB,QAAQ,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,WAAW,SAAS,SAAS,CAAC,YAAY,CAAC,EAAE,GAAG,SAAS,CAAC,YAAY,CAAC,EAAE,KACtE,eAAe,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC"}
1
+ {"version":3,"file":"useWatch.d.ts","sourceRoot":"","sources":["../src/useWatch.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,OAAO,EACP,uBAAuB,EACvB,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EAEX,iBAAiB,EAElB,MAAM,SAAS,CAAC;AAIjB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,QAAQ,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,EAAE;IACP,YAAY,CAAC,EAAE,iBAAiB,CAAC,uBAAuB,CAAC,YAAY,CAAC,CAAC,CAAC;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,iBAAiB,CAAC,uBAAuB,CAAC,YAAY,CAAC,CAAC,CAAC;AAC7D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,QAAQ,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,UAAU,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EACpE,KAAK,EAAE;IACP,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,cAAc,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAC7C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,QAAQ,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,WAAW,SAAS,SAAS,SAAS,CAAC,YAAY,CAAC,EAAE,GAAG,SAAS,SAAS,CAAC,YAAY,CAAC,EAAE,EAC3F,KAAK,EAAE;IACP,IAAI,EAAE,SAAS,CAAC,GAAG,WAAW,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,iBAAiB,CAAC,uBAAuB,CAAC,YAAY,CAAC,CAAC,CAAC;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,eAAe,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;AAC/C;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CACtB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,WAAW,SAAS,SAAS,CAAC,YAAY,CAAC,EAAE,GAAG,SAAS,CAAC,YAAY,CAAC,EAAE,KACtE,eAAe,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-hook-form",
3
3
  "description": "Performant, flexible and extensible forms library for React Hooks",
4
- "version": "7.25.3",
4
+ "version": "7.26.0",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.mjs",
7
7
  "umd:main": "dist/index.umd.js",
@@ -79,13 +79,13 @@
79
79
  "@types/jest": "^27.4.0",
80
80
  "@types/react": "^17.0.38",
81
81
  "@types/react-native": "^0.66.15",
82
- "@typescript-eslint/eslint-plugin": "^5.10.0",
83
- "@typescript-eslint/parser": "^5.10.0",
82
+ "@typescript-eslint/eslint-plugin": "^5.10.2",
83
+ "@typescript-eslint/parser": "^5.10.2",
84
84
  "@vitejs/plugin-react-refresh": "^1.3.6",
85
85
  "babel-jest": "^27.4.6",
86
86
  "bundlesize": "^0.18.0",
87
- "cypress": "9.3.1",
88
- "eslint": "^8.7.0",
87
+ "cypress": "9.4.1",
88
+ "eslint": "^8.8.0",
89
89
  "eslint-config-prettier": "^8.3.0",
90
90
  "eslint-plugin-cypress": "^2.12.1",
91
91
  "eslint-plugin-prettier": "^4.0.0",
@@ -94,14 +94,14 @@
94
94
  "eslint-plugin-simple-import-sort": "^7.0.0",
95
95
  "husky": "^7.0.4",
96
96
  "jest": "^27.4.7",
97
- "lint-staged": "^12.2.2",
97
+ "lint-staged": "^12.3.2",
98
98
  "prettier": "^2.5.1",
99
99
  "react": "^17.0.1",
100
100
  "react-dom": "^17.0.1",
101
- "react-native": "^0.67.1",
101
+ "react-native": "^0.67.2",
102
102
  "react-test-renderer": "^17.0.1",
103
103
  "rimraf": "^3.0.2",
104
- "rollup": "^2.66.0",
104
+ "rollup": "^2.66.1",
105
105
  "rollup-plugin-peer-deps-external": "^2.2.4",
106
106
  "rollup-plugin-sourcemaps": "^0.6.2",
107
107
  "rollup-plugin-terser": "^7.0.2",