@paragrav/rhf-utils 0.0.132 → 0.0.133
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.
- package/README.md +35 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
## About
|
|
4
4
|
|
|
5
|
-
Integration and utility library for react-hook-form.
|
|
5
|
+
Integration and utility library for [react-hook-form](https://www.react-hook-form.com/).
|
|
6
|
+
|
|
7
|
+
If you have multiple forms and would like a more declarative API to manage their behavior (via built-in and custom options), including transformation of backend errors, and debugging logging/errors.
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- built with and for [TypeScript](https://www.typescriptlang.org/)
|
|
12
|
+
- global and form-specific configuration/options
|
|
13
|
+
- with support for extendable options
|
|
14
|
+
- schema-typed Controller component
|
|
15
|
+
- schema-typed FormSubmitError class
|
|
16
|
+
- safer `FieldValues` type (i.e., `SafeFieldValues`)
|
|
17
|
+
- flatter `FieldErrors` structure (i.e., `FlatFieldErrors`)
|
|
18
|
+
- `zod` support
|
|
19
|
+
- includes distinction between `z.input` and `z.output` types for transformations support
|
|
20
|
+
- 3.3kB gzip core functionality (excluding [peer dependencies](#peer-dependencies))
|
|
6
21
|
|
|
7
22
|
## Install
|
|
8
23
|
|
|
@@ -14,7 +29,7 @@ yarn add @paragrav/rhf-utils # yarn
|
|
|
14
29
|
|
|
15
30
|
## Config
|
|
16
31
|
|
|
17
|
-
To configure, create a file `config.tsx` with desired configuration settings. This is global configuration across all forms.
|
|
32
|
+
To configure, create a file like `config.tsx` with desired configuration settings. This is global configuration across all forms, some of which can be overridden at the form level.
|
|
18
33
|
|
|
19
34
|
```tsx
|
|
20
35
|
export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
@@ -228,8 +243,8 @@ Example:
|
|
|
228
243
|
|
|
229
244
|
```tsx
|
|
230
245
|
<RhfUtilsZodForm
|
|
231
|
-
onSubmit={async ({ FormSubmitError }) => {
|
|
232
|
-
if (isProblem())
|
|
246
|
+
onSubmit={async (data, { FormSubmitError }) => {
|
|
247
|
+
if (isProblem(data))
|
|
233
248
|
throw new FormSubmitError({
|
|
234
249
|
root: { message: 'There was a problem with the form.' },
|
|
235
250
|
'street.address': { message: 'Street address invalid.' },
|
|
@@ -298,6 +313,8 @@ You can configure via `RhfUtilsClientConfig` (example at the top) when form cont
|
|
|
298
313
|
|
|
299
314
|
Use `useFlatFieldErrorsContext()` hook, which returns an object with errors grouped by `all`, `fields`, `roots`, `orphans` records, and `hasErrors` and `hasErrors` and `hasOrphans` booleans.
|
|
300
315
|
|
|
316
|
+
`FlatFieldErrors` type is a flattened, simplified version of RHF's `FieldErrors`. Keys represent flattened, dot-notation field paths.
|
|
317
|
+
|
|
301
318
|
### Orphan Errors
|
|
302
319
|
|
|
303
320
|
The concept of orphan errors is any error that is not being shown to user. An example would be a stray field in a schema that is prohibiting users from successfully submitting a form.
|
|
@@ -324,8 +341,6 @@ Orphans are exposed in a few places.
|
|
|
324
341
|
- And `useFlatFieldErrorsContext()` hook, which returns an object with errors grouped by `all`, `fields`, `roots`, `orphans` records, and `hasErrors` and `hasOrphans` boolean.
|
|
325
342
|
- Boolean value from `useFlatFieldErrorsContextHasOnlyOrphans`.
|
|
326
343
|
|
|
327
|
-
`FlatFieldErrors` is a flattened, simplified version of RHF's `FieldErrors`. Keys represent field paths flattened to dot notation.
|
|
328
|
-
|
|
329
344
|
## Form Groups
|
|
330
345
|
|
|
331
346
|
Sometimes you need to group multiple forms together.
|
|
@@ -350,3 +365,17 @@ In children forms, there are two options. You can choose to consider form "busy"
|
|
|
350
365
|
- it is mounted by using `useFormGroupChildIsMountedTracker` hook
|
|
351
366
|
|
|
352
367
|
Both hooks return `boolean` value indicating whether parent form is busy.
|
|
368
|
+
|
|
369
|
+
## Other
|
|
370
|
+
|
|
371
|
+
This library uses `SafeFieldValues` type which uses `unknown` instead of `any`.
|
|
372
|
+
|
|
373
|
+
#### Peer dependencies:
|
|
374
|
+
|
|
375
|
+
- [react](https://www.npmjs.com/package/react)
|
|
376
|
+
- [react-dom](https://www.npmjs.com/package/react-dom)
|
|
377
|
+
- [react-hook-form](https://www.npmjs.com/package/react-hook-form)
|
|
378
|
+
- [zod](https://www.npmjs.com/package/zod)
|
|
379
|
+
- [flat](https://www.npmjs.com/package/flat)
|
|
380
|
+
- [@hookform/resolvers](https://www.npmjs.com/package/@hookform/resolvers)
|
|
381
|
+
- [@hookform/devtools](https://www.npmjs.com/package/@hookform/devtools) (optional)
|