useKeyboardHeight

useKeyboardHeight is a React hook that tracks the on-screen keyboard height. It returns the current keyboard height in pixels, which updates automatically when the keyboard appears, disappears, or changes size.

Interface

function useKeyboardHeight(
  options?: UseKeyboardHeightOptions
): UseKeyboardHeightResult;

Parameters

• optionsUseKeyboardHeightOptions
  

  Configuration options.

  • options.immediateboolean · true
    

    If true, gets the initial keyboard height on mount.

Return Value

• UseKeyboardHeightResult
  

  An object containing the current keyboard height.

  • keyboardHeightnumber
    

    The current keyboard height in pixels. 0 when the keyboard is hidden.

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>
  );
}