useFocus

대상 요소를 기준으로 포커스 상태를 반환하고, 포커스 상태에 따른 액션을 정의할 수 있는 커스텀 훅입니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface UseFocusProps {
  onFocus?: (event: FocusEvent) => void;
  onBlur?: (event: FocusEvent) => void;
}

interface UseFocusReturnType<T extends HTMLElement> {
  ref: React.RefObject<T | null>;
  isFocus: boolean;
  setFocus: () => void;
}

function useFocus<T extends HTMLElement>({
  onFocus,
  onBlur,
}: UseFocusProps = {}): UseFocusReturnType<T>

Options

Name	Type	Default	Description
onFocus	(event: FocusEvent) => void	-	요소가 포커스를 받을 때 호출되는 콜백
onBlur	(event: FocusEvent) => void	-	요소가 포커스를 잃을 때 호출되는 콜백

Returns

Name	Type	Description
ref	React.RefObject<T | null>	대상 요소에 연결할 ref
isFocus	boolean	대상 요소가 현재 포커스 상태인지 여부
setFocus	() => void	대상 요소에 프로그래매틱하게 포커스를 부여하는 함수

Usage

typescript

import { useFocus } from '@modern-kit/react';

const Example = () => {
  const { ref, isFocus, setFocus } = useFocus<HTMLInputElement>({
    onFocus: () => console.log("focus"),
    onBlur: () => console.log("blur"),
  });

  return (
    <div>
      <input ref={ref} />
      <button onClick={() => setFocus()}>focus trigger</button>
      <div>{isFocus ? 'Focus' : 'Blur'}</div>
    </div>
  )
};

Example

Blur