track-1-form-with-react-hook-form
v0.1.9
Published
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
Downloads
24
Maintainers
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
npm i track-1-form-with-react-hook-form
Usage
Install React-hook-form ( This library should be accompanied by the installation of React Hook Form. )
npm i react-hook-form
import track-1-form-with-react-hook-form
import { useFormWithRef, useFormContextWithRef, } from "track-1-form-with-react-hook-form";
If you want to use useForm, use useFormWithRef.
const { registerWithRef, instancRef, ...methods } = useFormWithRef({});
If you want to use useFormContext, use useFormContextWithRef.
const { registerWithRef, instancRef, ...methods } = useFormContextWithRef();
Connect with your UI
function ComponentWithUseForm() { const { instanceRef, registerWithRef, ...methods } = useFormWithRef({ defaultValues: { test1: "", }, }); const handleOnchange = () => { console.log("hi"); }; return ( <form> <input {...registerWithRef("test1", { onChange: handleOnchange, })} /> </form> ); } function ComponentWithUseFormContext() { const { instanceRef, registerWithRef, ...methods } = useFormContextWithRef(); const handleOnchange = () => { console.log("hi"); }; return ( <form> <input {...registerWithRef("test2", { onChange: handleOnchange, })} /> </form> ); }
When you need a ref, use instanceRef.
function Component() { const { instanceRef, registerWithRef, ...methods } = useFormContextWithRef(); useEffect(() => { if (instanceRef.current) { instanceRef.current.focus(); } }, []); return ( <form> <input {...registerWithRef("test2")} /> </form> ); }
When dynamically adding or removing fields, you can use useDynamicFields.
| API | 기능 | params | | ------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------- | | handleKeyDownEnter | EnterKey 클릭 시 calllbackFn 실행 |
e: React.KeyboardEvent<HTMLInputElement>, handleFieldCallbacks?: (() => void)[]
| | checkFieldValueDuplicated | 입력된 값이 다른 값들과 중복되는지 확인 |alertMessage?: string
| | lockDynamicField | 입력이 완료된 Field의 재입력을 막음 | | | appendDynamicField | Field 추가 |fieldLimit?: number
| | deleteDynamicField | Field 제거 |e: React.MouseEvent<T>, idx: number, appendNewFiled?: boolean
| | activeField | Field의 lock을 해제 | | | clickOutside | Field의 외부를 클릭했을 때 callbackFn 실행 |e: Event, ignoredTarget?: HTMLElement, handleFieldCallbacks?: (() => void)[]
|