3 |
4 | 
5 |
6 |
3 |
4 |
5 |
6 |
| {generic.name} | 18 |{generic.type} | 19 |{generic.description} | 20 |
|---|
{generic.needYourSupport.description}
13 | 24 |15 | React hooks for controlled component 16 |
17 | 18 |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 |Field 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 | -------------------------------------------------------------------------------- /origin-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{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 | 52 |
15 | 
25 | 
32 | 
39 | 
50 | control
51 | {" "}
52 | object provided by useForm. It's optional if you are using
53 | FormProvider.
54 |
55 | ),
56 | }
57 |
--------------------------------------------------------------------------------
/origin-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 |
--------------------------------------------------------------------------------
/origin-src/pages/404.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 2rem;
3 | }
4 |
5 | .root {
6 | text-align: center;
7 | }
8 |
--------------------------------------------------------------------------------
/origin-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 || {generic.name} | 18 |{generic.type} | 19 |{generic.description} | 20 |
|---|
{generic.needYourSupport.description}
13 | 24 |16 | 제어 컴포넌트를 위한 리액트 훅 17 |
18 | 19 |필드 배열을 위한 React 훅
16 | 17 |{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 |Field 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{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 | 52 |16 | 비제어/제어 입력 필드 등록(register) 17 |
18 | 19 |
25 |
26 | register:{" "}
27 | {`(name: string, RegisterOptions?) => ({ onChange, onBlur, name, ref })`}
30 |
31 |
32 |
33 | useForm에서 제공하는{" "}
50 |
51 | control
52 | {" "}
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 |