# track-1-form-with-react-hook-form > React Dynamic Forms is a comprehensive third-party library that extends the capabilities of React Hook Form,empowering you to effortlessly manage dynamic and interactive forms in your React applications. Seamlessly add, remove, and validate dynamic form f Latest version **0.1.9** (published 2023-12-28) · ISC license · 0 weekly downloads ## Install ```sh npm install track-1-form-with-react-hook-form pnpm add track-1-form-with-react-hook-form yarn add track-1-form-with-react-hook-form bun add track-1-form-with-react-hook-form ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.9 | | Published | 2023-12-28 | | First published | 2023-12-18 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 13 | | Unpacked size | 19.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Track-1 | | Maintainers | ji-yeong | | Keywords | React, React Hook Form, Forms, Dynamic Forms, Form Validation, Form Management, React Library, Custom Hooks, useFormContextWithRef, useFormWithRef, useDynamicFields, useRegisterWithRef, Frontend Development, Web Development, User Experience, Dynamic Fields, Interactive Forms, Form Enhancements | ## Links - npm: https://www.npmjs.com/package/track-1-form-with-react-hook-form - Repository: https://github.com/Track-1/track-1-form-with-react-hook-form - Homepage: https://github.com/Track-1/track-1-form-with-react-hook-form#readme - Issues: https://github.com/Track-1/track-1-form-with-react-hook-form/issues - npm.io page: https://npm.io/package/track-1-form-with-react-hook-form ## Dependencies (13) - [react](https://npm.io/package/react.md) ^18.2.0 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [typescript](https://npm.io/package/typescript.md) ^4.9.5 - [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4 - [@types/jest](https://npm.io/package/@types/jest.md) ^27.5.2 - [@types/node](https://npm.io/package/@types/node.md) ^16.18.68 - [@types/react](https://npm.io/package/@types/react.md) ^18.2.45 - [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1 - [react-hook-form](https://npm.io/package/react-hook-form.md) ^7.49.2 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.18 - [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.4.0 - [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.17.0 - [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.9 (latest) — 2023-12-28 - 0.1.8 — 2023-12-26 - 0.1.7 — 2023-12-26 - 0.1.6 — 2023-12-26 - 0.1.5 — 2023-12-26 - 0.1.4 — 2023-12-26 - 0.1.3 — 2023-12-26 - 0.1.2 — 2023-12-20 - 0.1.1 — 2023-12-20 - 0.1.0 — 2023-12-18 ## README # Track-1-Form-with-react-hook-form Track-1의 form구현을 위한 react-hook-form의 서드파티 라이브러리 ## Features - **Create Register with Ref**: register 외부에서도 사용할 수 있는 ref를 반환하는 hook. - **Context Scope**: 기존의 useForm 반환값과 함게 register 외부에서도 사용할 수 있는 ref와 register를 반환하는 hook. - **Form with Ref**: 기존의 useContext 반환값과 함게 register 외부에서도 사용할 수 있는 ref와 register를 반환하는 hook. - **Form Context with Ref**: 유효한 범위에서 useFormContext를 사용할 수 있도록 하는 hook. ## Installation ```bash npm i track-1-form-with-react-hook-form ``` ## Usage 1. Install React-hook-form ( This library should be accompanied by the installation of React Hook Form. ) ```bash npm i react-hook-form ``` 2. import track-1-form-with-react-hook-form ```js import { useFormWithRef, useFormContextWithRef, } from "track-1-form-with-react-hook-form"; ``` 3. If you want to use useForm, use useFormWithRef. ```js const { registerWithRef, instancRef, ...methods } = useFormWithRef({}); ``` 4. If you want to use useFormContext, use useFormContextWithRef. ```js const { registerWithRef, instancRef, ...methods } = useFormContextWithRef(); ``` 5. Connect with your UI ```js function ComponentWithUseForm() { const { instanceRef, registerWithRef, ...methods } = useFormWithRef({ defaultValues: { test1: "", }, }); const handleOnchange = () => { console.log("hi"); }; return (
); } function ComponentWithUseFormContext() { const { instanceRef, registerWithRef, ...methods } = useFormContextWithRef(); const handleOnchange = () => { console.log("hi"); }; return (
); } ``` 6. When you need a ref, use instanceRef. ```js function Component() { const { instanceRef, registerWithRef, ...methods } = useFormContextWithRef(); useEffect(() => { if (instanceRef.current) { instanceRef.current.focus(); } }, []); return (
); } ``` 7. When dynamically adding or removing fields, you can use useDynamicFields. | API | 기능 | params | | ------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------- | | handleKeyDownEnter | EnterKey 클릭 시 calllbackFn 실행 | `e: React.KeyboardEvent, handleFieldCallbacks?: (() => void)[]` | | checkFieldValueDuplicated | 입력된 값이 다른 값들과 중복되는지 확인 | `alertMessage?: string` | | lockDynamicField | 입력이 완료된 Field의 재입력을 막음 | | | appendDynamicField | Field 추가 | `fieldLimit?: number` | | deleteDynamicField | Field 제거 | `e: React.MouseEvent, idx: number, appendNewFiled?: boolean` | | activeField | Field의 lock을 해제 | | | clickOutside | Field의 외부를 클릭했을 때 callbackFn 실행 | ` e: Event, ignoredTarget?: HTMLElement, handleFieldCallbacks?: (() => void)[]` | --- _Source: https://npm.io/package/track-1-form-with-react-hook-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._