{title}
102 | 103 | 104 | {author && ( 105 |106 | 111 | {author} 112 | 113 |
114 | )} 115 | 116 | {description &&{description}
} 117 |
3 |
4 | 
5 |
6 |
3 |
4 |
5 |
6 |
Performant, flexible and extensible forms with easy to use validation.
10 | 11 | ## Install 12 | 13 | ```shellscript 14 | pnpm install && pnpm dev 15 | ``` 16 | 17 | ## Backers 18 | 19 | Thanks goes to all our backers! [[Become a backer](https://opencollective.com/react-hook-form#backer)]. 20 | 21 | 22 |
23 |
24 |
25 | ## Contributors
26 |
27 | Thanks goes to these wonderful people. [[Become a contributor](https://github.com/react-hook-form/documentation/blob/master/CONTRIBUTING.md)].
28 |
29 |
30 | 
31 |
32 |
--------------------------------------------------------------------------------
/contentlayer.config.ts:
--------------------------------------------------------------------------------
1 | import { defineDocumentType, makeSource } from "contentlayer/source-files"
2 | import { remarkHeadingId } from "remark-custom-heading-id"
3 | import remarkGfm from "remark-gfm"
4 | import rehypeMdxCodeProps from "rehype-mdx-code-props"
5 | import emoji from "remark-emoji"
6 | import * as sidebar from "./src/components/Menu/MenuLinks"
7 | import type { Pages } from "./src/types/types"
8 |
9 | export const Doc = defineDocumentType(() => ({
10 | name: "Doc",
11 | contentType: "mdx",
12 | filePathPattern: "**/*.mdx",
13 | fields: {
14 | title: { type: "string", required: true },
15 | description: { type: "string", required: true },
16 | sidebar: {
17 | type: "enum",
18 | options: [
19 | "apiLinks",
20 | "advancedLinks",
21 | "tsLinks",
22 | "faqLinks",
23 | "getStartedLinks",
24 | ],
25 | required: true,
26 | },
27 | },
28 | computedFields: {
29 | slug: {
30 | type: "string",
31 | resolve: (doc) => `/${doc._raw.flattenedPath}`,
32 | },
33 | slugAsParams: {
34 | type: "string",
35 | resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
36 | },
37 |
38 | /**
39 | * Can't define value different from primitives, so hardcoding the correct type
40 | * @see https://github.com/contentlayerdev/contentlayer/issues/149
41 | */
42 | segment: {
43 | type: "string[]" as "list",
44 | resolve: (doc) => doc._raw.flattenedPath.split("/"),
45 | },
46 | pages: {
47 | type: "json",
48 | resolve: (doc) => {
49 | // added explicit type casting to keep track of this data structure
50 | // in case in the future contentlayer will support values different than primitives
51 | return sidebar[doc.sidebar] as unknown as Pages
52 | },
53 | },
54 | },
55 | }))
56 |
57 | export default makeSource({
58 | contentDirPath: "src/content",
59 | documentTypes: [Doc],
60 | mdx: {
61 | remarkPlugins: [remarkGfm, remarkHeadingId, emoji],
62 | rehypePlugins: [rehypeMdxCodeProps],
63 | },
64 | })
65 |
--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import tseslint from "typescript-eslint"
3 | import { FlatCompat } from "@eslint/eslintrc"
4 | import eslintPluginJsxA11y from "eslint-plugin-jsx-a11y"
5 | import eslintPluginReact from "eslint-plugin-react"
6 |
7 | const compat = new FlatCompat({
8 | baseDirectory: import.meta.dirname,
9 | })
10 |
11 | export default tseslint.config(
12 | tseslint.configs.recommendedTypeChecked,
13 |
14 | ...compat.config({
15 | extends: ["next"],
16 | rules: {
17 | // react
18 | "react/prop-types": "off",
19 | "react/no-unescaped-entities": "off",
20 | "react/jsx-curly-brace-presence": "warn",
21 |
22 | // jsx-ally is already included in next-js so
23 | // we are adding only recommended rules directly here
24 | ...eslintPluginJsxA11y.flatConfigs.recommended.rules,
25 | "jsx-a11y/no-onchange": "warn",
26 |
27 | // import
28 | "import/no-anonymous-default-export": "off",
29 |
30 | // next
31 | "@next/next/no-img-element": "off",
32 | },
33 | }),
34 |
35 | // @ts-expect-error eslintPluginReact.configs.flat, but runtime is always defined
36 | eslintPluginReact.configs.flat["jsx-runtime"],
37 |
38 | {
39 | linterOptions: {
40 | reportUnusedDisableDirectives: "error",
41 | },
42 | languageOptions: {
43 | parserOptions: {
44 | projectService: true,
45 | tsconfigRootDir: import.meta.dirname,
46 | },
47 | },
48 | rules: {
49 | // typescript
50 | "@typescript-eslint/explicit-function-return-type": "off",
51 | "@typescript-eslint/explicit-module-boundary-types": "off",
52 | "@typescript-eslint/interface-name-prefix": "off",
53 | "@typescript-eslint/no-floating-promises": "off",
54 | "@typescript-eslint/restrict-template-expressions": [
55 | "error",
56 | {
57 | allowAny: false,
58 | allowBoolean: false,
59 | allowNever: false,
60 | allowNullish: false,
61 | allowNumber: true,
62 | allowRegExp: false,
63 | },
64 | ],
65 | },
66 | }
67 | )
68 |
--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
14 |
15 | formState: Object
16 |
17 |
18 | {api.formState.description}
19 |
20 |
29 | formState is wrapped with a{" "}
30 |
35 | Proxy
36 | {" "}
37 | to improve render performance and skip extra logic if specific state
38 | is not subscribed to. Therefore make sure you invoke or read it
39 | before a render in order to enable the state update.
40 |
44 | formState is updated in batch. If you want to subscribe
45 | to formState via useEffect, make sure that
46 | you place the entire formState in the optional array.
47 |
66 | Pay attention to the logical operator when subscription to{" "}
67 | formState.
68 |
18 | 20 | Build the next-generation forms with modern technology and best in 21 | class user experience and accessibility. 22 |
23 | 24 |Generate code for React/Vanilla JS
27 |GUI with drag and drop
30 |Improved accessibility by default
33 |Support dynamic field array
36 |End-to-end integration with submission
39 |User behaviour analytic
42 |and many more features
45 || {generic.name} | 18 |{generic.type} | 19 |{generic.description} | 20 |
|---|
v{version || "6"}
97 |106 | 111 | {author} 112 | 113 |
114 | )} 115 | 116 | {description &&{description}
} 117 |{generic.needYourSupport.description}
13 | 24 |15 | React hooks for controlled component 16 |
17 | 18 |
25 |
26 | useController:
27 |
28 | {`(props?: UseControllerProps) => { field: object, fieldState: object, formState: object }`}
31 |
32 |
33 | {api.useController.description}
34 |
36 | The following table contains information about the arguments for{" "}
37 | useController.
38 |
| {generic.name} | 44 |{generic.type} | 45 |{generic.required} | 46 |{generic.description} | 47 |
|---|
React hooks for Field Array
15 | 16 |{fieldState.isTouched && "Touched"}
15 |{fieldState.isDirty && "Dirty"}
16 |{fieldState.invalid ? "invalid" : "valid"}
17 |{data?.firstName}
; 42 | }; 43 | 44 | const Edit = ({ update, index, value, control }) => { 45 | const { register, handleSubmit } = useForm({ 46 | defaultValues: value 47 | }); 48 | 49 | return ( 50 |Total Amount: {total}
; 23 | }; 24 | 25 | export default function App() { 26 | const { 27 | register, 28 | control, 29 | handleSubmit, 30 | formState: { errors } 31 | } = useFormField is dirty.
: null; 10 | }; 11 | 12 | export default function App() { 13 | const { register, handleSubmit, control } = useForm({ 14 | defaultValues: { 15 | firstName: "firstName" 16 | } 17 | }); 18 | const onSubmit = (data) => console.log(data); 19 | 20 | return ( 21 | 27 | ); 28 | } 29 | ` 30 | -------------------------------------------------------------------------------- /src/components/general-observer.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FunctionComponent, 3 | RefObject, 4 | useEffect, 5 | useRef, 6 | useState, 7 | ReactNode, 8 | } from "react" 9 | 10 | interface IGeneralObserverProps { 11 | /** React Children */ 12 | children: ReactNode 13 | placeholder?: ReactNode 14 | /** Fires when IntersectionObserver enters viewport */ 15 | onEnter?: (id?: string) => void 16 | } 17 | 18 | export const GeneralObserver: FunctionComponent*/}
33 | {/* Next-gen form building platform with code generation.*/}
34 | {/*
{generic.learnMore.description}
12 | 13 | 22 |
35 | {tokens.map((line, lineIndex) => {
36 | const { key: lineKey, ...lineProps } = getLineProps({
37 | line,
38 | key: lineIndex,
39 | })
40 |
41 | return (
42 |
43 | {line.map((lineToken, linenTokenIndex) => {
44 | const { key: lineTokenKey, ...lineTokenProps } =
45 | getTokenProps({
46 | token: lineToken,
47 | key: linenTokenIndex,
48 | })
49 | return (
50 |
51 | )
52 | })}
53 |
54 | )
55 | })}
56 |
57 | )}
58 | {children}
55 | )
56 | },
57 | TabGroup,
58 | PrettyObject({ value }: { value: RecordSUPPORTED AND BACKED BY
7 | 8 | 49 |
25 | 
36 | 
47 | @hookform/devtools as a dev dependency package.
11 |
12 | ),
13 | step2: (
14 | <>
15 | Step 2: Integrate with your React
16 | App is as simple as import a Component into your App/Form render and pass{" "}
17 | control prop into it.
18 |
19 | ),
20 | demoDescription:
21 | "You can interact with the following demo to see DevTool in action.",
22 | function: "Functionality",
23 | functionDetail: (
24 | <>
25 | Read inputs and entire form state.
27 |30 | Note: Because RHF is based on 31 | uncontrolled inputs, Update button will refresh the 32 | DevTool to read the latest input value and form state. 33 |
34 |Visual feedback when input or form is valid or invalid.
37 |Search registered input and also custom registered components.
40 |43 | Note: you can easily locate 44 | an input by clicking the Native button. This will be 45 | useful when you are working on a large form. 46 |
47 |control
51 | {" "}
52 | object provided by useForm. It's optional if you are using
53 | FormProvider.
54 |
55 | ),
56 | }
57 |
--------------------------------------------------------------------------------
/src/data/nav.tsx:
--------------------------------------------------------------------------------
1 | const Nav = {
2 | home: "Home",
3 | getStarted: "Get Started",
4 | advanced: "Advanced",
5 | tools: {
6 | nav: "Tools",
7 | devTools: "DevTools",
8 | formBuilder: "Form Builder",
9 | },
10 | builder: (
11 | <>
12 | Form Builder
13 |
14 | ),
15 | faqs: "FAQs",
16 | releases: "Releases",
17 | resources: "Resources",
18 | }
19 |
20 | export default Nav
21 |
--------------------------------------------------------------------------------
/src/pages/404.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 2rem;
3 | }
4 |
5 | .root {
6 | text-align: center;
7 | }
8 |
--------------------------------------------------------------------------------
/src/pages/404.tsx:
--------------------------------------------------------------------------------
1 | import Layout from "../components/layout"
2 | import Seo from "../components/seo"
3 | import styles from "./404.module.css"
4 |
5 | const NotFoundPage = () => (
6 | You just found a route that doesn't exist... the sadness.
12 |{doc.description}
57 | 58 |19 | The following are assets that represent React Hook Form. 20 |
21 | 22 |
28 | PNG
29 |
35 | SVG
36 |
44 | PNG
45 |
52 | SVG
53 |
60 | PNG
61 |
67 | SVG
68 |
76 | PNG
77 |
84 | SVG
85 |