import * as React from "react" ; import ApiRefTable from "../v6/ApiRefTableV6" ; import CodeArea , { CodeSandBoxLink } from "../CodeArea" ; import SideMenu from "../SideMenu" ; import ApiFormState from "./ApiFormStateV6" ; import resetCode from "../codeExamples/v6/resetCode" ; import ApiWatch from "../v6/ApiWatchV6" ; import ApiErrors from "../ApiErrors" ; import handleSubmitCode from "../codeExamples/v6/handleSubmitCode" ; import setError from "../codeExamples/v6/setError" ; import setErrorTs from "../codeExamples/v6/setErrorTs" ; import clearError from "../codeExamples/v6/clearError" ; import clearErrorTs from "../codeExamples/v6/clearErrorTs" ; import setValue from "../codeExamples/v6/setValue" ; import setValueTs from "../codeExamples/v6/setValueTs" ; import setValueTypes from "../codeExamples/v6/setValueTypes" ; import getValues from "../codeExamples/v6/getValues" ; import getValuesTs from "../codeExamples/v6/getValuesTs" ; import defaultValues from "../codeExamples/v6/defaultValues" ; import defaultValuesTs from "../codeExamples/v6/defaultValuesTs" ; import trigger from "../codeExamples/v6/trigger" ; import triggerTs from "../codeExamples/v6/triggerTs" ; import Footer from "../Footer" ; import FormContext from "../FormContext" ; import unregisterCode from "../codeExamples/v6/unregisterCode" ; import unregisterCodeTs from "../codeExamples/v6/unregisterCodeTs" ; import Popup from "../Popup" ; import { navigate } from "@reach/router" ; import { useStateMachine } from "little-state-machine" ; import generic from "../../data/generic" ; import apiEn from "../../data/en/api" ; import ControllerContentV6 from "./ControllerContentV6" ; import UseControllerContent from "../v6/UseControllerContentV6" ; import ErrorMessage from "../v6/ErrorMessageV6" ; import translateLink from "../logic/translateLink" ; import TabGroup from "../TabGroup" ; import setMultipleErrors from "../codeExamples/v6/setMultipleErrors" ; import setMultipleErrorsTs from "../codeExamples/v6/setMultipleErrorsTs" ; import setAllErrors from "../codeExamples/v6/setAllErrors" ; import setAllErrorsTs from "../codeExamples/v6/setAllErrorsTs" ; import resetController from "../codeExamples/v6/resetController" ; import resetControllerTs from "../codeExamples/v6/resetControllerTs" ; import control from "../codeExamples/v6/control" ; import UseFieldArrayContentV6 from "./UseFieldArrayContentV6" ; import ValidationResolver from "./ValidationResolverV6" ; import UseWatch from "../UseWatchContent" ; import { getNavLink } from "../Nav" ; import handleSubmitCodeTs from "../codeExamples/v6/handleSubmitCodeTs" ; import VideoList from "../VideoList" ; import * as typographyStyles from "../../styles/typography.module.css" ; import * as tableStyles from "../../styles/table.module.css" ; import * as buttonStyles from "../../styles/button.module.css" ; import * as containerStyles from "../../styles/container.module.css" ; import * as headerStyles from "../Header.module.css" ; import * as styles from "../ApiPage.module.css" ; import resetCodeTs from "../codeExamples/v6/resetCodeTs" ; import getValuesTypes from "../codeExamples/v6/getValuesTypes" ; import controlTs from "../codeExamples/v6/controlTs" ; import setValueUseFieldArray from "../codeExamples/v6/setValueUseFieldArray" ; import submitReset from "../codeExamples/v6/submitReset" ; import handleSubmitAsyncCode from "../codeExamples/v6/handleSubmitAsyncCode" ; import fieldArrayReset from "../codeExamples/v6/fieldArrayReset" ; import { Link } from "gatsby" ; import colors from "../../styles/colors" ; import { updateSetting } from "../../actions/settingActions" ; const { useRef , useEffect } = React ; const enLinks = [ apiEn . useForm , apiEn . register , apiEn . unregister , apiEn . errors , apiEn . watch , apiEn . handleSubmit , apiEn . reset , apiEn . setError , apiEn . clearError , apiEn . setValue , apiEn . getValues , apiEn . trigger , apiEn . control , apiEn . formState , apiEn . Controller , apiEn . useController , apiEn . ErrorMessage , apiEn . useFormContext , apiEn . useWatch , apiEn . useFieldArray , ] ; const codeSandBoxStyle = { position : "relative" , left : 0 , float : "right" , } ; interface Props { formData ? : any ; defaultLang : string ; api : any ; } function ApiPageV6 ( { formData , defaultLang , api } ) { const { actions , state : { language } , } = useStateMachine ( { updateSetting , } ) ; const isUnmount = useRef ( false ) ; const { currentLanguage } = language && language . currentLanguage ? language : { currentLanguage : defaultLang } ; const [ activeIndex , setActiveIndex ] = React . useState ( 0 ) ; const [ play , setPlay ] = React . useState ( false ) ; const links = [ { ... api . useForm , size : "5KB" , } , api . register , api . unregister , api . errors , api . watch , api . handleSubmit , api . reset , api . setError , api . clearError , api . setValue , api . getValues , api . trigger , api . control , api . formState , { ... api . Controller , size : "1.2KB" , } , { ... api . useController , size : "0KB" , } , { ... api . ErrorMessage , size : "483B" , } , { ... api . useFormContext , size : "100B" , } , { ... api . useWatch , size : "1KB" , } , { ... api . useFieldArray , size : "3KB" , } , ] ; const copyFormData = useRef ( [ ] ) ; const apiSectionsRef = useRef ( { useFormRef : null , registerRef : null , unregisterRef : null , errorsRef : null , watchRef : null , handleSubmitRef : null , resetRef : null , setErrorRef : null , clearErrorsRef : null , setValueRef : null , getValuesRef : null , triggerRef : null , controlRef : null , formStateRef : null , ControllerRef : null , useControllerRef : null , ErrorMessageRef : null , useFormContextRef : null , useWatchRef : null , useFieldArrayRef : null , } ) ; copyFormData . current = formData ; const goToSection = ( name , animate = true ) => { const url = window . location . href ; const hashIndex = url . indexOf ( "#" ) ; const filterName = name . replace ( / |-/g , "" ) ; history . pushState ( { } , null , hashIndex < 0 ? `${ url }#${ filterName }` : `${ url . substr ( 0 , hashIndex ) }#${ filterName }` ) ; const refName = `${ filterName }Ref` ; if ( apiSectionsRef . current [ refName ] ) { apiSectionsRef . current [ refName ] . scrollIntoView ( animate && Math . abs ( Object . keys ( apiSectionsRef . current ) . findIndex ( ( item ) => item === refName ) - activeIndex ) < 5 ? { behavior : "smooth" } : undefined ) ; } } ; useEffect ( ( ) => { if ( location . hash ) { setTimeout ( ( ) => goToSection ( location . hash . substr ( 1 ) , false ) , 10 ) ; } actions . updateSetting ( { version : 6 , } ) ; } , [ ] ) ; useEffect ( ( ) => { if ( isUnmount . current ) return ; try { const observer = new IntersectionObserver ( ( ) => { const allTops = Object . keys ( apiSectionsRef . current ) . reduce ( ( acc , cur ) => { if ( apiSectionsRef . current [ cur ] ) { acc . push ( apiSectionsRef . current [ cur ] . getBoundingClientRect ( ) . top ) ; } return acc ; } , [ ] ) ; const smallestAbsoluteTop = Math . min ( ... allTops . map ( ( top ) => Math . abs ( top ) ) ) ; const smallestAbsoluteTopIndex = allTops . findIndex ( ( top ) => Math . abs ( top ) === smallestAbsoluteTop ) ; setActiveIndex ( smallestAbsoluteTopIndex ) ; } , { rootMargin : "100px" , threshold : [ 0.01 ] , } ) ; Object . values ( apiSectionsRef . current ) . forEach ( ( item ) => { if ( item ) { observer . observe ( item ) ; } } ) ; } catch { } return ( ) => { isUnmount . current = true ; } ; } , [ ] ) ; return ( < div className = { containerStyles . container } > < div > < h1 className = { typographyStyles . headingWithTopMargin } id = "main" > API . < span style = { { fontWeight : 400 , fontSize : 20 } } > V6 < /span> < /h1> < /div> < p className = { typographyStyles . subHeading } > { api . header . description } < /p> < div className = { containerStyles . wrapper } > < SideMenu version = { 6 } links = { links } activeIndex = { activeIndex } enLinks = { enLinks } goToSection = { goToSection } currentLanguage = { currentLanguage } / > < main > < div style = { { border : `1px solid ${ colors . lightBlue }` , marginBottom : 40 , padding : "0 20px" , borderRadius : 4 , } } > < p > < span style = { { fontSize : 12 } } > ► < /span> React Hook Form V7 is released . If you are planning to upgrade , please read through the { " " } < Link to = "/migrate-v6-to-v7" > Migration Guide to V7 < /Link>. < /p> < /div> < div className = { styles . versionToggle } > < div className = { `${ headerStyles . toggleGroup } ${ headerStyles . smallToggleGroup }` } style = { { marginBottom : 10 , } } > < button disabled role = "tab" aria - label = "show v6 doc" aria - selected = "false" aria - controls = "tabPanel-2" > V6 < /button> < button aria - label = "show v5 doc" aria - selected = "true" aria - controls = "tabPanel-1" role = "tab" onClick = { ( ) => { navigate ( getNavLink ( `/v5/api` , currentLanguage ) ) ; } } > V5 < /button> < /div> < /div> < section ref = { ( ref ) => { apiSectionsRef . current . useFormRef = ref ; } } id = "useFormRef" > < code className = { typographyStyles . codeHeading } > < h2 > useForm : { " " } < span className = { typographyStyles . typeText } > Function < /span> < button className = { typographyStyles . videoLink } onClick = { ( ) => setPlay ( ! play ) } > Videos < /button> < /h2> < /code> < VideoList lists = { [ { url : "https://www.youtube.com/watch?v=bU_eq8qyjic" , title : "The BEST Way To Create Forms In React - React Hook Form Tutorial - How To Create Forms In React" , } , { url : "https://www.youtube.com/watch?v=PcrrJ0BOFGw" , title : "React Hook Form Tutorial | Why It's Useful" , } , { url : "https://www.youtube.com/watch?v=bQRIBpKN8-s" , title : "React Hook Form Tutorial - How to Create a Custom Input" , } , { url : "https://www.youtube.com/watch?v=oSIHZ9zKzVA" , title : "Make React Forms EASY with React Hook Form!" , } , ] } play = { play } / > { api . useForm . description } < CodeArea withOutCopy rawData = { `const { register } = useForm({
  mode: 'onSubmit',
  reValidateMode: 'onChange',
  defaultValues: {},
  resolver: undefined,
  context: undefined,
  criteriaMode: "firstError",
  shouldFocusError: true,
  shouldUnregister: true,
})` } tsRawData = { `type FormInputs = {
  firstName: string;
  lastName: string;
};

const { register } = useForm<FormInputs>({
  mode: 'onSubmit',
  reValidateMode: 'onChange',
  defaultValues: {},
  resolver: undefined,
  context: undefined,
  criteriaMode: "firstError",
  shouldFocusError: true,
  shouldUnregister: true,
})` } /> < h5 className = { typographyStyles . h5 } > < code > mode : { " " } < span className = { typographyStyles . typeText } > onChange | onBlur | onSubmit | onTouched | all = 'onSubmit' < /span> < /code> < Popup top = { 3 } / > < /h5> < div className = { tableStyles . tableWrapper } > < table className = { tableStyles . table } > < tbody > < tr > < th > { generic . name [ currentLanguage ] } < /th> < th > { generic . type [ currentLanguage ] } < /th> < th > { generic . description [ currentLanguage ] } < /th> < /tr> < tr > < td > onSubmit ( Default ) < /td> < td > < span className = { typographyStyles . typeText } > string < /span> < /td> < td > { api . useForm . validateOnSubmit } < /td> < /tr> < tr > < td > onBlur < /td> < td > < span className = { typographyStyles . typeText } > string < /span> < /td> < td > { api . useForm . validateOnBlur } < /td> < /tr> < tr > < td > onChange < /td> < td > < span className = { typographyStyles . typeText } > string < /span> < /td> < td > { api . useForm . validateOnChange } < /td> < /tr> < tr > < td > onTouched < /td> < td > < span className = { typographyStyles . typeText } > string < /span> < /td> < td > { api . useForm . validationOnTouched } < /td> < /tr> < tr > < td > all < /td> < td > < span className = { typographyStyles . typeText } > string < /span> < /td> < td > { api . useForm . validationOnAll } < /td> < /tr> < /tbody> < /table> < h5 className = { typographyStyles . h5 } style = { { marginTop : 20 } } > < code > reValidateMode : { " " } < span className = { typographyStyles . typeText } > onChange | onBlur | onSubmit = 'onChange' < /span> < /code> < Popup top = { 3 } message = "React Native: Custom register or using Controller" / > < /h5> < table > < tbody > < tr > < td > { api . useForm . reValidateMode } < /td> < /tr> < /tbody> < /table> < /div> < h5 className = { typographyStyles . h5 } style = { { marginTop : 20 } } > < code > defaultValues : { " " } < span className = { typographyStyles . typeText } > { `Record<string, any>` } = { `{}` } < /span> < a className = { typographyStyles . videoLink } href = "https://www.youtube.com/watch?v=jHQC2NY0A-k" target = "_blank" rel = "noopener noreferrer" > Video < /a> < /code> < /h5> { api . useForm . defaultValues ( goToSection ) } < CodeArea url = "https://codesandbox.io/s/react-hook-form-defaultvalues-v6-09b8g" rawData = { defaultValues } tsUrl = "https://codesandbox.io/s/react-hook-form-defaultvalues-v6-ts-i497w" tsRawData = { defaultValuesTs } / > < ValidationResolver api = { api } /> < h5 className = { typographyStyles . h5 } style = { { marginTop : 20 } } > < code > shouldUnregister : { " " } < span className = { typographyStyles . typeText } > boolean = true < /span> < /code> < CodeSandBoxLink style = { { ... codeSandBoxStyle , top : 0 , } } url = "https://codesandbox.io/s/autounregister-4e91k" / > < /h5> { api . useForm . shouldUnregister } < div className = { tableStyles . tableWrapper } > < table className = { tableStyles . table } style = { { marginTop : 0 , width : "100%" } } > < thead > < tr style = { { borderBottom : "1px solid rgb(236, 89, 144)" } } > < td width = { 320 } > < /td> < td width = { 200 } > < code > true < /code> < /td> < td > < code > false < /code> < /td> < /tr> < /thead> < tbody > < tr > < td > Can you unregister an input ? < /td> < td > < span role = "img" aria - label = "approving-checkbox" > ✅ < /span> < /td> < td > < span role = "img" aria - label = "unapproving-cancel" > ❌ < /span> < /td> < /tr> < tr > < td > Value remains when input unmounts ? < /td> < td > < span role = "img" aria - label = "unapproving-cancel" > ❌ < /span> < /td> < td > < span role = "img" aria - label = "approving-checkbox" > ✅ < /span> < /td> < /tr> < tr > < td > Is form state updated ? < br /> eg : < code > isValid , isDirty , touched < /code> < /td> < td > < span role = "img" aria - label = "approving-checkbox" > ✅ < /span> < /td> < td > < span role = "img" aria - label = "unapproving-cancel" > ❌ you will need to clear manually < /span> < /td> < /tr> < /tbody> < /table> < /div> < div className = { tableStyles . tableWrapper } > < table className = { tableStyles . table } > < tbody > < tr > < td > < h5 className = { typographyStyles . h5 } style = { { border : "none" , marginTop : 20 , } } > < code > context : < br /> < span className = { styles . mobileTypeText } > object < /span> < /code> < /h5> < /td> < td > { api . useForm . validateContext } < CodeSandBoxLink style = { codeSandBoxStyle } url = "https://codesandbox.io/s/resolver-context-sd2vj" / > < /td> < /tr> < tr > < td > < h5 className = { typographyStyles . h5 } style = { { border : "none" , marginTop : 20 , } } > < code > criteriaMode < br / > < span className = { styles . mobileTypeText } > firstError | all < /span> < /code> < /h5> < /td> < td > { api . useForm . validateCriteriaMode } < CodeSandBoxLink style = { codeSandBoxStyle } url = "https://codesandbox.io/s/react-hook-form-v6-errors-validatecriteriamode-all-z60r2" / > < /td> < /tr> < tr > < td > < h5 className = { typographyStyles . h5 } style = { { border : "none" , marginTop : 20 , } } > < code > shouldFocusError : < br /> < span className = { styles . mobileTypeText } > boolean = true < /span> < /code> < /h5> < /td> < td > { api . useForm . submitFocusError } < /td> < /tr> < /tbody> < /table> < /div> < p style = { { textAlign : "center" } } > ♦ < /p> < /section> < section ref = { ( ref ) => { apiSectionsRef . current . registerRef = ref ; } } id = "registerRef" > < code className = { typographyStyles . codeHeading } > < h2 > register : { " " } < span className = { typographyStyles . typeText } > { `(Ref, RegisterOptions?) => void` } < /span> < Popup message = "React Native: Custom register or using Controller" / > < /h2> < /code> < ApiRefTable api = { api } goToSection = { goToSection } currentLanguage = { currentLanguage } / > < /section> < hr / > < section ref = { ( ref ) => { apiSectionsRef . current . unregisterRef = ref ; } } id = "unregisterRef" > < code className = { typographyStyles . codeHeading } > < h2 > unregister : { " " } < span className = { typographyStyles . typeText } > { `(name: string | string[]) => void` } < /span> < /h2> < /code> { api . unregister . description } < CodeArea url = "https://codesandbox.io/s/react-hook-form-unregister-v6-9nyzn" rawData = { unregisterCode } tsUrl = "https://codesandbox.io/s/react-hook-form-unregister-v6-ts-0ocnw" tsRawData = { unregisterCodeTs } / > < /section> < hr / > < section ref = { ( ref ) => { apiSectionsRef . current . errorsRef = ref ; } } id = "errorsRef" > < ApiErrors currentLanguage = { currentLanguage } api = { api } goToSection = { goToSection } / > < /section> < section ref = { ( ref ) => { apiSectionsRef . current . watchRef = ref ; } } id = "watchRef" > < ApiWatch currentLanguage = { currentLanguage } api = { api } / > < /section> < section ref = { ( ref ) => { apiSectionsRef . current . handleSubmitRef = ref ; } } id = "handleSubmitRef" > < code className = { typographyStyles . codeHeading } > < h2 > handleSubmit : < br /> < span className = { typographyStyles . typeText } > ( ( data : Object , e ? : Event ) = & gt ; void , ( errors : Object , e ? : Event ) = & gt ; void ) = & gt ; Function < /span> < /h2> < /code> { api . handleSubmit . description } < TabGroup buttonLabels = { [ "sync" , "async" ] } > < CodeArea rawData = { handleSubmitCode } tsRawData = { handleSubmitCodeTs } url = "https://codesandbox.io/s/react-hook-form-handlesubmit-v6-uqmiy" tsUrl = "https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v6-994mz" / > < CodeArea rawData = { handleSubmitAsyncCode } url = "https://codesandbox.io/s/xrjv48o0qp" / > < /TabGroup> < /section> < hr / > < section ref = { ( ref ) => { apiSectionsRef . current . resetRef = ref ; } } id = "resetRef" > < code className = { typographyStyles . codeHeading } > < h2 > reset : { " " } < span className = { typographyStyles . typeText } > { `(values?: Record<string, any>, omitResetState?: Record<string, boolean>) => void` } < /span> < /h2> < /code> { api . reset ( goToSection ) . description } < TabGroup buttonLabels = { [ "Uncontrolled" , "Controller" , "Submit with reset" , "Field Array" , ] } > < CodeArea rawData = { resetCode } tsRawData = { resetCodeTs } url = "https://codesandbox.io/s/react-hook-form-reset-v6-forked-1g2vu" tsUrl = "https://codesandbox.io/s/react-hook-form-reset-v6-ts-forked-7wy3r" / > < CodeArea rawData = { resetController } tsRawData = { resetControllerTs } url = "https://codesandbox.io/s/react-hook-form-v6-controller-ts-4dpm9" tsUrl = "https://codesandbox.io/s/react-hook-form-v6-controller-ts-4dpm9" / > < CodeArea rawData = { submitReset } url = "https://codesandbox.io/s/react-hook-form-handlesubmit-with-reset-xrh0t" / > < CodeArea rawData = { fieldArrayReset } url = "https://codesandbox.io/s/react-hook-form-reset-usefieldarray-p111q" / > < /TabGroup> < /section> < hr / > < section ref = { ( ref ) => { apiSectionsRef . current . setErrorRef = ref ; } } id = "setErrorRef" > < code className = { typographyStyles . codeHeading } > < h2 > setError : < br /> < span className = { typographyStyles . typeText } > { `(name: string, error: { type?: string, types?: object, message?: string, shouldFocus?: boolean }) => void` } < /span> < /h2> < /code> { api . setError . description } < TabGroup buttonLabels = { [ "Single Error" , "Multiple Errors" , "Single Field Errors" , ] } > < CodeArea rawData = { setError } tsRawData = { setErrorTs } url = "https://codesandbox.io/s/react-hook-form-v6-seterror-9cebt" tsUrl = "https://codesandbox.io/s/react-hook-form-v6-ts-seterror-h74dz" / > < CodeArea rawData = { setMultipleErrors } tsRawData = { setMultipleErrorsTs } url = "https://codesandbox.io/s/react-hook-form-v6-seterror-9cebt" tsUrl = "https://codesandbox.io/s/react-hook-form-v6-ts-seterror-h74dz" / > < CodeArea rawData = { setAllErrors } tsRawData = { setAllErrorsTs } url = "https://codesandbox.io/s/react-hook-form-set-single-field-with-multiple-errors-w18sx" / > < /TabGroup> < /section> < hr / > < section ref = { ( ref ) => { apiSectionsRef . current . clearErrorsRef = ref ; } } id = "clearErrorsRef" > < code className = { typographyStyles . codeHeading } > < h2 > clearErrors : { " " } < span className = { typographyStyles . typeText } > ( name ? : string | string [ ] ) = & gt ; void < /span> < /h2> < /code> { api . clearError . description } < CodeArea rawData = { clearError } url = "https://codesandbox.io/s/react-hook-form-v6-clearerrors-887rh" tsRawData = { clearErrorTs } tsUrl = "https://codesandbox.io/s/react-hook-form-v6-ts-clearerrors-0zry5" / > < /section> < hr / > < section ref = { ( ref ) => { apiSectionsRef . current . setValueRef = ref ; } } id = "setValueRef" > < code className = { typographyStyles . codeHeading } > < h2 > setValue : { " " } < span className = { typographyStyles . typeText } > ( name : string , value : any , config ? : Object ) = & gt ; void < /span> < /h2> < /code> { api . setValue . description } < TabGroup buttonLabels = { [ "basic" , "useFieldArray set value" ] } > < CodeArea rawData = { setValue } url = "https://codesandbox.io/s/react-hook-form-v6-setvalue-wjplb" tsRawData = { setValueTs } rawTypes = { setValueTypes } tsUrl = "https://codesandbox.io/s/react-hook-form-v6-ts-setvalue-4nq5e" / > < CodeArea rawData = { setValueUseFieldArray } url = "https://codesandbox.io/s/usefieldarray-with-setvalue-l6rct" / > < /TabGroup> < /section> < hr / > < section ref = { ( ref ) => { apiSectionsRef . current . getValuesRef = ref ; } } id = "getValuesRef" > < code className = { typographyStyles . codeHeading } > < h2 > getValues : { " " } < span className = { typographyStyles . typeText } > { `(payload?: string | string[]) => Object` } < /span> < /h2> < /code> { api . getValues . description } < CodeArea rawData = { getValues } url = "https://codesandbox.io/s/react-hook-form-v6-getvalues-v2gc7" tsRawData = { getValuesTs } tsUrl = "https://codesandbox.io/s/react-hook-form-v6-ts-getvalues-u7xb1" rawTypes = { getValuesTypes } / > < /section> < hr / > < section ref = { ( ref ) => { apiSectionsRef . current . triggerRef = ref ; } } id = "triggerRef" > < code className = { typographyStyles . codeHeading } > < h2 > trigger : { " " } < span className = { typographyStyles . typeText } > { `(payload?: string | string[]) => Promise<boolean>` } < /span> < /h2> < /code> { api . trigger . description } < CodeArea rawData = { trigger } url = "https://codesandbox.io/s/react-hook-form-v6-triggervalidation-b6j5h" tsRawData = { triggerTs } tsUrl = "https://codesandbox.io/s/react-hook-form-v6-ts-triggervalidation-xj8gk" / > < /section> < hr / > < section ref = { ( ref ) => { apiSectionsRef . current . controlRef = ref ; } } id = "controlRef" > < code className = { typographyStyles . codeHeading } > < h2 > control : { " " } < span className = { typographyStyles . typeText } > Object < /span> < /h2> < /code> { api . control . description } < CodeArea rawData = { control } url = "https://codesandbox.io/s/react-hook-form-v6-controller-ts-4dpm9" tsRawData = { controlTs } tsUrl = "https://codesandbox.io/s/react-hook-form-v6-controller-ts-4dpm9" / > < /section> < hr / > < section ref = { ( ref ) => { apiSectionsRef . current . formStateRef = ref ; } } id = "formStateRef" > < ApiFormState currentLanguage = { currentLanguage } api = { api } sectionsRef = { apiSectionsRef } / > < /section> < hr / > < section ref = { ( ref ) => ( apiSectionsRef . current . ControllerRef = ref ) } id = "ControllerRef" > < ControllerContentV6 currentLanguage = { currentLanguage } api = { api } / > < /section> < hr / > < section ref = { ( ref ) => ( apiSectionsRef . current . useControllerRef = ref ) } id = "useControllerRef" > < UseControllerContent currentLanguage = { currentLanguage } api = { api } / > < /section> < hr / > < section ref = { ( ref ) => ( apiSectionsRef . current . ErrorMessageRef = ref ) } id = "ErrorMessageRef" > < ErrorMessage currentLanguage = { currentLanguage } api = { api } / > < /section> < hr / > < section ref = { ( ref ) => ( apiSectionsRef . current . useFormContextRef = ref ) } id = "useFormContextRef" > < FormContext currentLanguage = { currentLanguage } api = { api } / > < /section> < hr / > < section ref = { ( ref ) => ( apiSectionsRef . current . useWatchRef = ref ) } id = "useWatchRef" > < UseWatch currentLanguage = { currentLanguage } api = { api } / > < /section> < hr / > < section ref = { ( ref ) => ( apiSectionsRef . current . useFieldArrayRef = ref ) } id = "useFieldArrayRef" > < UseFieldArrayContentV6 currentLanguage = { currentLanguage } api = { api } / > < /section> < hr / > < div className = { containerStyles . centerContent } style = { { marginTop : 100 } } > < h1 > { generic . advanceUsage [ currentLanguage ] . title } < /h1> < p > { generic . advanceUsage [ currentLanguage ] . description } < /p> < button className = { buttonStyles . primaryButton } onClick = { ( ) => { navigate ( translateLink ( "/advanced-usage" , currentLanguage ) ) ; } } style = { { margin : "40px auto" } } > { generic . advanceUsage [ currentLanguage ] . buttonText } < /button> < /div> < Footer currentLanguage = { currentLanguage } / > < /main> < /div> < /div>); } export default React . memo ( ApiPageV6 ) ;