useAvoidKeyboard

useAvoidKeyboard は、画面下部に固定された要素がソフトウェアキーボードと重ならないようにする React フックです。 position: fixed の要素に適用できる CSS スタイルを返し、 キーボードが表示されたときに要素をキーボードの上へ滑らかに移動させます。

インターフェース

function useAvoidKeyboard(
  options?: UseAvoidKeyboardOptions
): UseAvoidKeyboardResult;

パラメータ

• optionsUseAvoidKeyboardOptions
  

  設定オプション。

  • options.safeAreaBottomnumber · 0
    

    キーボードが非表示のときの、下端からの基本オフセット（ピクセル単位）です。iPhone のホームインジケーター領域を考慮する際に役立ちます。

  • options.transitionDurationnumber · 200
    

    滑らかなアニメーションのためのトランジション時間（ミリ秒単位）。

  • options.transitionTimingFunctionCSSProperties['transitionTimingFunction'] · '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>Submit</button>
    </div>
  );
}

// セーフエリアの下端オフセットを指定する場合（例：iPhone のホームインジケーター）
function FixedBottomCTA() {
  const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });

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