useAvoidKeyboard

하단 고정 요소가 온스크린 키보드를 자연스럽게 피할 수 있도록 도와주는 리액트 훅이에요. 키보드가 나타나면 transform을 사용해 요소를 위로 부드럽게 이동시켜요.

Interface

function useAvoidKeyboard(
  options?: UseAvoidKeyboardOptions
): UseAvoidKeyboardResult;

파라미터

• optionsUseAvoidKeyboardOptions
  

  키보드 회피 동작을 설정하는 옵션이에요.

  • options.safeAreaBottomnumber · 0
    

    키보드가 숨겨져 있을 때 기본 하단 오프셋(px)이에요. iPhone의 홈 인디케이터 영역을 고려할 때 유용해요.

  • options.transitionDurationnumber · 200
    

    부드러운 애니메이션을 위한 전환 시간(ms)이에요.

  • options.transitionTimingFunctionstring
    

    애니메이션의 전환 타이밍 함수예요. 기본값은 ease-out이에요.

  • options.immediateboolean
    

    만약 true이면, 마운트 시 즉시 현재 키보드 높이를 가져와요. 기본값은 true예요.

반환 값

• UseAvoidKeyboardResult
  

  키보드 회피를 위한 CSS 스타일을 담은 객체예요.

  • styleCSSProperties
    

    하단 고정 요소에 적용할 CSS 스타일 객체예요. transform과 transition 속성을 포함해요.

예시

function FixedBottomCTA() {
  const { style } = useAvoidKeyboard();

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        ...style,
      }}
    >
      <button>제출</button>
    </div>
  );
}

// iPhone 홈 인디케이터 오프셋을 포함한 예시
function FixedBottomCTA() {
  const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        ...style,
      }}
    >
      <button>제출</button>
    </div>
  );
}