diff --git a/origin-src/components/Menu/MenuLinks.ts b/origin-src/components/Menu/MenuLinks.ts index 128025265..e7391d385 100644 --- a/origin-src/components/Menu/MenuLinks.ts +++ b/origin-src/components/Menu/MenuLinks.ts @@ -160,6 +160,10 @@ export const apiLinks: Pages = [ pathname: "/docs/useformstate/errormessage", name: "ErrorMessage", }, + { + pathname: "/docs/useformstate/formstatesubscribe", + name: "FormStateSubscribe", + }, ], }, { diff --git a/origin-src/components/Nav.tsx b/origin-src/components/Nav.tsx index 5de42579a..290d0e5a1 100644 --- a/origin-src/components/Nav.tsx +++ b/origin-src/components/Nav.tsx @@ -43,60 +43,6 @@ export default function Nav() { return ( <> -
- {show && ( - - )} - - {showLang && } -
- -
- - - - - - - - - - - ♥ - - - - - - - - - - - - -
- {showMenu && ( + +
+ {show && ( + + )} + + {showLang && } +
+ +
+ + + + + + + + + + + ♥ + + + + + + + + + + + + +
) } diff --git a/origin-src/components/layout.css b/origin-src/components/layout.css index ace01f6b4..709cabfb2 100644 --- a/origin-src/components/layout.css +++ b/origin-src/components/layout.css @@ -412,7 +412,10 @@ a.active { bottom: 105px; font-size: 10px; text-decoration: none; - line-height: 3; + min-height: 35px; + height: auto; + align-content: center; + line-height: 1.4; } .editPage:hover { diff --git a/origin-src/content/docs/usecontroller/controller.mdx b/origin-src/content/docs/usecontroller/controller.mdx index 26e166dca..4db8719a3 100644 --- a/origin-src/content/docs/usecontroller/controller.mdx +++ b/origin-src/content/docs/usecontroller/controller.mdx @@ -23,6 +23,7 @@ The following table contains information about the arguments for `Controller`. | `shouldUnregister` | boolean = false` | | Input will be unregistered after unmount and defaultValues will be removed as well.

**Note:** this prop should be avoided when using with `useFieldArray` as `unregister` function gets called after input unmount/remount and reorder. | | `disabled` | boolean = false` | | `disabled` prop will be returned from `field` prop. Controlled input will be disabled and its value will be omitted from the submission data. | | `defaultValue` | unknown | | **Important:** Can not apply `undefined` to `defaultValue` or `defaultValues` at `useForm`. | +| `exact` | boolean = false | | This prop will enable an exact match for input name subscriptions, default to true. | ### Return diff --git a/origin-src/content/docs/useform.mdx b/origin-src/content/docs/useform.mdx index a5314e5e9..05a61efac 100644 --- a/origin-src/content/docs/useform.mdx +++ b/origin-src/content/docs/useform.mdx @@ -94,8 +94,10 @@ sidebar: apiLinks | [criteriaMode](#criteriaMode) | Display all validation errors or one at a time. | | [shouldFocusError](#shouldFocusError) | Enable or disable built-in focus management. | | [delayError](#delayError) | Delay error from appearing instantly. | +| [validate](#validate) | Form-level validation is limited to built-in validation methods. | | [shouldUseNativeValidation](#shouldUseNativeValidation) | Use browser built-in form constraint API. | | [shouldUnregister](#shouldUnregister) | Enable and disable input unregister after unmount. | +| [progressive](/docs/useform/form) | Enable progressive enhancement for native form submission when using the `Form` component. | | [disabled](#disabled) | Disable the entire form with all associated inputs. | **Schema validation props:** @@ -277,6 +279,40 @@ When set to `true` (default), and the user submits a form that fails validation, | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | This configuration delays the display of error states to the end-user by a specified number of milliseconds. If the user corrects the error input, the error is removed instantly, and the delay is not applied. | | +#### validate: Function {#validate} + +--- + +This example demonstrates how to use the **new `validate` API** in combination with `useForm` to perform **form-level validation** in a React application. + +The `validate` function receives the entire form object and allows you to return a **structured error** that integrates with `formState.errors`. + +**Examples:** + +--- + +```javascript copy +const { + register, + formState: { errors }, +} = useForm({ + validate: async ({ formValues }: FormValidateResult) => { + if (formValues.test1.length > formValues.test.length) { + return { + type: "formError", + message: "something is wrong here", + } + } + + if (formValue.test === "test") { + return "direct error message" + } + + return true + }, +}) +``` + #### shouldUnregister: boolean = false {#shouldUnregister} --- diff --git a/origin-src/content/docs/useform/clearerrors.mdx b/origin-src/content/docs/useform/clearerrors.mdx index fc7e743c0..33087a17b 100644 --- a/origin-src/content/docs/useform/clearerrors.mdx +++ b/origin-src/content/docs/useform/clearerrors.mdx @@ -32,8 +32,8 @@ This function can manually clear errors in the form. -- This will not affect the validation rules attached to each inputs. -- This method doesn't affect validation rules or `isValid` formState. +- This method does not affect the validation rules attached to inputs and does not + impact formState.isValid. diff --git a/origin-src/content/docs/useform/handlesubmit.mdx b/origin-src/content/docs/useform/handlesubmit.mdx index 4246c0c81..6ab2501dd 100644 --- a/origin-src/content/docs/useform/handlesubmit.mdx +++ b/origin-src/content/docs/useform/handlesubmit.mdx @@ -19,15 +19,6 @@ This function will receive the form data if form validation is successful. -- You can easily submit form asynchronously with handleSubmit. - - ```javascript copy - handleSubmit(onSubmit)() - - // You can pass an async function for asynchronous validation. - handleSubmit(async (data) => await fetchAPI(data)) - ``` - - `disabled` inputs will appear as `undefined` values in form values. If you want to prevent users from updating an input and wish to retain the form value, you can use `readOnly` or disable the entire <fieldset />. Here is an [example](https://codesandbox.io/s/react-hook-form-disabled-inputs-oihxx). - `handleSubmit` function will not swallow errors that occurred inside your onSubmit callback, so we recommend you to try and catch inside async request and handle those errors gracefully for your customers. diff --git a/origin-src/content/docs/useform/register.mdx b/origin-src/content/docs/useform/register.mdx index ee9fdd61f..7797c9d12 100644 --- a/origin-src/content/docs/useform/register.mdx +++ b/origin-src/content/docs/useform/register.mdx @@ -102,32 +102,29 @@ By selecting the register option, the API table below will get updated.
  • - Name is **required** and **unique** (except native radio and checkbox). - Input name supports both dot and bracket syntax, which allows you to easily - create nested form fields. + Name is required and must be unique + (except for native radio and checkbox inputs).
  • - Name can neither start with a number nor use number as key name. Please - avoid special characters as well. -
    • -
  • - We are using dot syntax only for typescript usage consistency, so bracket `[]` - will not work for array form value. - + Name must not start with a number or use numbers as standalone keys, and should avoid special characters. + For TypeScript consistency, only dot syntax is supported—bracket syntax ([]) will not work for array form values. + ```javascript -register('test.0.firstName'); // ✅ -register('test[0]firstName'); // ❌ +register("test.0.firstName") // ✅ +register("test[0].firstName") // ❌ ```
    • -
  • Disabled input will result in an undefined form value. If you want to prevent users from updating the input, you can use `readOnly` or `disable` the entire `fieldset`. Here is an [example](https://codesandbox.io/s/react-hook-form-disabled-inputs-oihxx).
    • - -
  • To produce an array of fields, input names should be followed by a dot and number. For example: `test.0.data`
    • +
  • Disabled inputs return undefined as their form value. + If you need to prevent user edits while preserving the value, use + readOnly or disable the entire fieldset. Here is an [example](https://codesandbox.io/s/react-hook-form-disabled-inputs-oihxx).
    • -
  • Changing the name on each render will result in new inputs being registered. It's recommended to keep static names for each registered input.
    • +
  • Changing an input’s name on each render causes it to be re-registered as a new field. + To ensure consistent behavior, keep input names stable across renders.
    • -
  • Input value and reference will no longer gets removed based on unmount. You can invoke unregister to remove that value and reference.
    • +
  • Input values and references are not automatically removed on unmount. + Use unregister to explicitly remove them when needed.
  • Individual register option can't be removed by `undefined` or `{}`. You can update individual attribute instead. diff --git a/origin-src/content/docs/useform/reset.mdx b/origin-src/content/docs/useform/reset.mdx index 39e2a84a9..c38379305 100644 --- a/origin-src/content/docs/useform/reset.mdx +++ b/origin-src/content/docs/useform/reset.mdx @@ -29,26 +29,8 @@ Reset the entire form state, fields reference, and subscriptions. There are opti -- For controlled components you will need to pass `defaultValues` to `useForm` in order to `reset` the `Controller` components' value. -- When `defaultValues` is not supplied to `reset` API, then HTML native [reset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset) API will be invoked to restore the form. -- Avoid calling `reset` before `useForm`'s `useEffect` is invoked, this is because `useForm`'s subscription needs to be ready before `reset` can send a signal to flush form state update. -- It's recommended to `reset` inside `useEffect` after submission. - ```javascript - useEffect(() => { - reset({ - data: "test", - }) - }, [isSubmitSuccessful]) - ``` -- It's fine to run `reset` without argument as long as you have provided a `defaultValues` at useForm. - - ```javascript - reset() // update form back to default values - - reset({ test: "test" }) // update your defaultValues && form values - - reset(undefined, { keepDirtyValues: true }) // reset other form state but keep defaultValues and form values - ``` +- It is recommended to always provide defaultValues when resetting a form + to ensure all inputs, especially controlled components, are restored correctly. diff --git a/origin-src/content/docs/useform/seterror.mdx b/origin-src/content/docs/useform/seterror.mdx index b515ab123..c325ab346 100644 --- a/origin-src/content/docs/useform/seterror.mdx +++ b/origin-src/content/docs/useform/seterror.mdx @@ -36,14 +36,12 @@ The function allows you to manually set one or more errors. setError("root.serverError", { type: "400", }) - setError("root.random", { - type: "random", - }) ``` -- Can be useful in the `handleSubmit` method when you want to give error feedback to a user after async validation. (ex: API returns validation errors) - `shouldFocus` doesn't work when an input has been disabled. -- This method will force set `isValid` formState to `false`. However, it's important to be aware that `isValid` will always be derived from the validation result of your input registration rules or schema result. -- There are certain keywords that need to be avoided to prevent conflicts with type checking. They are `type` and `types`. +- This method will force formState.isValid to false. + However, isValid is always derived from the validation results of your + registered inputs or schema. +- There are certain keywords that need to be avoided to prevent conflicts with type checking. diff --git a/origin-src/content/docs/useform/setvalue.mdx b/origin-src/content/docs/useform/setvalue.mdx index d6bee7819..9791fd4d2 100644 --- a/origin-src/content/docs/useform/setvalue.mdx +++ b/origin-src/content/docs/useform/setvalue.mdx @@ -35,22 +35,6 @@ This function allows you to dynamically set the value of a registered`UseFormSubscribe` -Subscribe to [`formState`](/docs/useform/formState) changes and value updates. You can subscribe to individual fields or the entire form, while avoiding unnecessary re-renders caused by form changes. +Subscribe to [`formState`](/docs/useform/formstate) changes and value updates. You can subscribe to individual fields or the entire form, while avoiding unnecessary re-renders caused by form changes. ### Props @@ -23,13 +23,6 @@ Subscribe to [`formState`](/docs/useform/formState) changes and value updates. Y
      -
    • -

      - This function is intended for subscribing to changes only; dispatching - state updates or triggering re-renders is not allowed. eg `setValue` or - `reset` -

      -

    • This function shares the same functionality as{" "} diff --git a/origin-src/content/docs/useformstate.mdx b/origin-src/content/docs/useformstate.mdx index ca24c84c3..b29e917ee 100644 --- a/origin-src/content/docs/useformstate.mdx +++ b/origin-src/content/docs/useformstate.mdx @@ -6,9 +6,13 @@ sidebar: apiLinks diff --git a/origin-src/content/docs/useformstate/formstatesubscribe.mdx b/origin-src/content/docs/useformstate/formstatesubscribe.mdx new file mode 100644 index 000000000..e2c8abe07 --- /dev/null +++ b/origin-src/content/docs/useformstate/formstatesubscribe.mdx @@ -0,0 +1,52 @@ +--- +title: FormStateSubscribe +description: Component to subscribe to form state update +sidebar: apiLinks +--- + +## \ `FormStateSubscribe:` Component + +A React Hook Form component that provides the same functionality as `uesFormState`, but in component form. Instead of using the hook inside another component, you can use `` directly in your JSX to subscribe to and render form state. + +### Props + +--- + +| Name | Type | Description | +| ---------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `control` | Object | [`control`](/docs/useform/control) object provided by `useForm`. It's optional if you are using `FormProvider`. | +| `name` | string \| string[] | Provide a single input name, an array of them, or subscribe to all inputs' formState update. | +| `disabled` | boolean = false | Option to disable the subscription. | +| `exact` | boolean = false | This prop will enable an exact match for input name subscriptions. | +| `render` | Function | Subscribes to form state of specified form field(s) and re-renders its child function whenever the form state changes. This allows you to declaratively consume form state in JSX without manually wiring up state. | + +**Examples:** + +--- + +```tsx copy sandbox="" +import { useForm, FormStateSubscribe } from "react-hook-form" + +const App = () => { + const { register, control } = useForm() + + return ( +

      +
      + + + {/* re-render only when form state of `foo` changes */} + {errors.foo?.message}} + /> + +
      + ) +} +``` + +``` + +``` diff --git a/origin-src/content/docs/usewatch.mdx b/origin-src/content/docs/usewatch.mdx index ed5163f17..845b4ec70 100644 --- a/origin-src/content/docs/usewatch.mdx +++ b/origin-src/content/docs/usewatch.mdx @@ -4,6 +4,15 @@ description: React Hook for subscribing to input changes sidebar: apiLinks --- + + ## \ `useWatch:` `({ control?: Control, name?: string, defaultValue?: unknown, disabled?: boolean }) => object` Behaves similarly to the `watch` API, however, this will isolate re-rendering at the custom hook level and potentially result in better performance for your application. diff --git a/origin-src/data/api.tsx b/origin-src/data/api.tsx index b2c6acf70..08c88d9ec 100644 --- a/origin-src/data/api.tsx +++ b/origin-src/data/api.tsx @@ -2843,6 +2843,21 @@ setValue('notRegisteredInput', { test: '1', test2: '2' }); // ✅ sugar syntax t
    + + + exact + + + boolean = false + + + +

    + This prop will enable an exact match for input name subscriptions, + default to true. +

    + + ), tips: ( diff --git a/origin-src/data/resources.tsx b/origin-src/data/resources.tsx index f64715ff6..256fee64a 100644 --- a/origin-src/data/resources.tsx +++ b/origin-src/data/resources.tsx @@ -533,6 +533,16 @@ export default { }, ], video: [ + { + type: "video", + title: "React Hook Form - The Free Course", + url: "https://youtu.be/lp8xXoG0xQY", + authorUrl: "https://www.youtube.com/@codaffection", + author: "CodAffection", + description: + "Learn A - Z about React Hook Form library with a practical project build, An in-depth course covering the fundamentals of the library", + version: "7", + }, { type: "video", title: