useKeyboardHeight

A React hook that tracks the on-screen keyboard height in real time. It automatically updates when the keyboard appears, disappears, or changes size.

Interface

function useKeyboardHeight(
  options?: UseKeyboardHeightOptions
): UseKeyboardHeightResult;

Parameters

• optionsUseKeyboardHeightOptions
  

  Options to configure the keyboard height tracking behavior.

  • options.immediateboolean · true
    

    If true, gets the current keyboard height immediately on mount.

Return Value

• UseKeyboardHeightResult
  

  An object containing the keyboard height information.

  • keyboardHeightnumber
    

    The current keyboard height in pixels. Returns 0 when the keyboard is closed.

Example

function ChatInput() {
  const { keyboardHeight } = useKeyboardHeight();

  return (
    <div style={{ paddingBottom: `${keyboardHeight}px` }}>
      <input type="text" placeholder="Type a message..." />
    </div>
  );
}

function KeyboardStatus() {
  const { keyboardHeight } = useKeyboardHeight();

  return (
    <div>
      {keyboardHeight > 0
        ? `Keyboard is open (${keyboardHeight}px)`
        : 'Keyboard is closed'}
    </div>
  );
}