{"version":3,"file":"component---src-pages-api-useformcontext-en-tsx-f1d45b7909f28eda43ff.js","mappings":"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","sources":["webpack://react-hook-form-website/./src/components/FormContext.tsx","webpack://react-hook-form-website/./src/components/codeExamples/formContext.ts","webpack://react-hook-form-website/./src/components/Menu.tsx","webpack://react-hook-form-website/./src/components/UseFormContext.tsx","webpack://react-hook-form-website/./src/pages/api/useformcontext.en.tsx","webpack://react-hook-form-website/./src/components/SideMenu.module.css"],"sourcesContent":["import * as React from \"react\"\nimport CodeArea from \"./CodeArea\"\nimport formContext from \"./codeExamples/formContext\"\nimport generic from \"../data/generic\"\nimport * as typographyStyles from \"../styles/typography.module.css\"\nimport * as tableStyles from \"../styles/table.module.css\"\n\nexport default function FormContext({ currentLanguage, api }) {\n  return (\n    <>\n      <code className={typographyStyles.codeHeading}>\n        <h2>\n          useFormContext:{\" \"}\n          <span className={typographyStyles.typeText}>Function</span>\n        </h2>\n      </code>\n\n      {api.useFormContext.introduction}\n\n      <h2 className={typographyStyles.subTitle}>Props</h2>\n\n      <div className={tableStyles.tableWrapper}>\n        <table className={tableStyles.table}>\n          <tbody>\n            <tr>\n              <th>{generic.name[currentLanguage]}</th>\n              <th>{generic.type[currentLanguage]}</th>\n              <th>{generic.description[currentLanguage]}</th>\n            </tr>\n            <tr>\n              <td>\n                <code>...props</code>\n              </td>\n              <td>\n                <code className={typographyStyles.typeText}>Object</code>\n              </td>\n              <td>\n                Accept all <code>useForm</code> methods.\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      {api.useFormContext.description}\n\n      <CodeArea\n        rawData={formContext}\n        url=\"https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi\"\n      />\n    </>\n  )\n}\n","export default `import React from \"react\";\nimport { useForm, FormProvider, useFormContext } from \"react-hook-form\";\n\nexport default function App() {\n  const methods = useForm();\n  const onSubmit = data => console.log(data);\n\n  return (\n    <FormProvider {...methods} > // pass all methods into the context\n      <form onSubmit={methods.handleSubmit(onSubmit)}>\n        <NestedInput />\n        <input type=\"submit\" />\n      </form>\n    </FormProvider>\n  );\n}\n\nfunction NestedInput() {\n  const { register } = useFormContext(); // retrieve all hook methods\n  return <input {...register(\"test\")} />;\n}\n`\n","import * as React from \"react\"\nimport { useStateMachine } from \"little-state-machine\"\nimport { Link } from \"gatsby\"\nimport { useLocation } from \"@reach/router\"\nimport colors from \"../styles/colors\"\nimport * as styles from \"./SideMenu.module.css\"\nimport * as typographyStyles from \"../styles/typography.module.css\"\nimport { updateCurrentLanguage } from \"../actions/languageActions\"\n\nconst pages = [\n  {\n    pathname: \"/api/useform\",\n    name: \"useForm\",\n    pages: [\n      { pathname: \"/api/useform/register\", name: \"register\" },\n      { pathname: \"/api/useform/unregister\", name: \"unregister\" },\n      { pathname: \"/api/useform/formstate\", name: \"formState\" },\n      { pathname: \"/api/useform/watch\", name: \"watch\" },\n      { pathname: \"/api/useform/handlesubmit\", name: \"handleSubmit\" },\n      { pathname: \"/api/useform/reset\", name: \"reset\" },\n      { pathname: \"/api/useform/seterror\", name: \"setError\" },\n      { pathname: \"/api/useform/clearerrors\", name: \"clearErrors\" },\n      { pathname: \"/api/useform/setvalue\", name: \"setValue\" },\n      { pathname: \"/api/useform/setFocus\", name: \"setFocus\" },\n      { pathname: \"/api/useform/getvalues\", name: \"getValues\" },\n      { pathname: \"/api/useform/trigger\", name: \"trigger\" },\n      { pathname: \"/api/useform/control\", name: \"control\" },\n    ],\n  },\n  {\n    pathname: \"/api/usecontroller\",\n    name: \"useController\",\n    pages: [\n      {\n        pathname: \"/api/usecontroller/controller\",\n        name: \"Controller\",\n      },\n    ],\n  },\n  {\n    pathname: \"/api/useformcontext\",\n    name: \"useFormContext\",\n  },\n  {\n    pathname: \"/api/usewatch\",\n    name: \"useWatch\",\n  },\n  {\n    pathname: \"/api/useformstate\",\n    name: \"useFormState\",\n    pages: [\n      {\n        pathname: \"/api/useformstate/errormessage\",\n        name: \"ErrorMessage\",\n      },\n    ],\n  },\n  {\n    pathname: \"/api/usefieldarray\",\n    name: \"useFieldArray\",\n  },\n]\n\nfunction Menu() {\n  const { state } = useStateMachine({ updateCurrentLanguage })\n  const lightMode = state?.setting?.lightMode\n  const { pathname } = useLocation()\n\n  return (\n    <aside className={`${styles.menu} ${lightMode ? styles.lightMenu : \"\"}`}>\n      <div>\n        <div className={styles.titleList}>\n          <h4\n            className={typographyStyles.title}\n            style={{\n              fontSize: 16,\n              color: colors.lightBlue,\n            }}\n          >\n            Menu\n          </h4>\n        </div>\n\n        <ul\n          className=\"scrollArea\"\n          style={{\n            paddingBottom: 40,\n          }}\n        >\n          {pages.map((page) => {\n            const isActive = pathname === page.pathname\n\n            return (\n              <li key={page.pathname} className={styles.menuItem}>\n                <code aria-hidden className={styles.code}>{`</>`}</code>\n                <Link\n                  className={isActive ? styles.isActive : \"\"}\n                  to={page.pathname}\n                >\n                  {page.name}\n                </Link>\n\n                {page.pages && (\n                  <ul>\n                    {page.pages.map((page) => {\n                      const isActive = pathname === page.pathname\n\n                      return (\n                        <li key={page.pathname} className={styles.menuItem}>\n                          <code\n                            aria-hidden\n                            className={styles.code}\n                          >{`</>`}</code>{\" \"}\n                          <Link\n                            className={isActive ? styles.isActive : \"\"}\n                            to={page.pathname}\n                          >\n                            {page.name}\n                          </Link>\n                        </li>\n                      )\n                    })}\n                  </ul>\n                )}\n              </li>\n            )\n          })}\n        </ul>\n      </div>\n    </aside>\n  )\n}\n\nexport { Menu }\n","import * as React from \"react\"\nimport api from \"../data/en/api\"\nimport * as typographyStyles from \"../styles/typography.module.css\"\nimport FormContext from \"./FormContext\"\nimport Footer from \"./Footer\"\nimport { Menu } from \"./Menu\"\nimport * as containerStyles from \"../styles/container.module.css\"\n\nexport default function UseFieldArray({\n  currentLanguage,\n}: {\n  currentLanguage: string\n}) {\n  return (\n    <div className={containerStyles.container}>\n      <h1 className={typographyStyles.headingWithTopMargin} id=\"main\">\n        useFormContext\n      </h1>\n      <p className={typographyStyles.subHeading}>\n        React Context API for hook form\n      </p>\n\n      <div className={containerStyles.wrapper}>\n        <Menu />\n\n        <main>\n          <FormContext currentLanguage={currentLanguage} api={api} />\n\n          <Footer currentLanguage={currentLanguage || \"en\"} />\n        </main>\n      </div>\n    </div>\n  )\n}\n","import * as React from \"react\"\nimport Seo from \"../../components/seo\"\nimport Layout from \"../../components/layout\"\nimport UseFormContext from \"../../components/UseFormContext\"\n\nexport default ({ location }: { location: any }) => {\n  return (\n    <Layout location={location} defaultLang=\"en\">\n      <Seo title=\"useFormContext\" location={location} />\n      <UseFormContext currentLanguage=\"en\" />\n    </Layout>\n  )\n}\n","// extracted by mini-css-extract-plugin\nexport var menu = \"SideMenu-module--menu--2pmVQ\";\nexport var arrow = \"SideMenu-module--arrow--kte6y\";\nexport var arrowLast = \"SideMenu-module--arrowLast--Ln3zG\";\nexport var size = \"SideMenu-module--size--3tZ4v\";\nexport var lightMenu = \"SideMenu-module--lightMenu--F0Lxu\";\nexport var titleList = \"SideMenu-module--titleList--ydVFH\";\nexport var code = \"SideMenu-module--code--lBWpe\";\nexport var menuItem = \"SideMenu-module--menuItem--eLHu4\";\nexport var isActive = \"SideMenu-module--isActive--2gopj\";"],"names":["FormContext","currentLanguage","api","className","typographyStyles","useFormContext","introduction","tableStyles","generic","description","CodeArea","rawData","url","pages","pathname","name","Menu","state","useStateMachine","updateCurrentLanguage","lightMode","setting","useLocation","styles","style","fontSize","color","colors","paddingBottom","map","page","isActive","key","Link","to","UseFieldArray","containerStyles","id","Footer","location","defaultLang","title","menu","arrow","arrowLast","size","lightMenu","titleList","code","menuItem"],"sourceRoot":""}