track-1-form-with-react-hook-form

v0.1.9

Published

5 months ago

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

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)[] |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Track-1-Form-with-react-hook-form

Features

Installation

Usage