Hiyve Components - v1.0.0
    Preparing search index...

    Function useOnScreenKeyboard

    • Reports whether the on-screen keyboard is open, using the VisualViewport API.

      Returns OnScreenKeyboardState

      { isOpen, height } — see OnScreenKeyboardState.

      When the soft keyboard opens, browsers in the default interactive-widget=resizes-visual mode — and iOS Safari always, since it ignores interactive-widget — shrink only the VISUAL viewport while the LAYOUT viewport (and window.innerHeight) stays full-height. The gap between the two is the keyboard. This hook watches that gap so UI can respond: hide a bottom navigation bar, lift a docked input, or clamp a fixed container.

      A threshold separates the keyboard from ordinary visual-viewport changes (browser chrome, address bar) and pinch-zoom (which changes scale, not just height) is ignored. On Chromium with interactive-widget=resizes-content the LAYOUT viewport already resizes with the keyboard, so innerHeight tracks it, the gap stays under the threshold, and this hook reports isOpen: false — the layout has already reflowed and no extra compensation is wanted.

      No-op (always closed) when window.visualViewport is unavailable (older browsers, SSR).

      const { isOpen } = useOnScreenKeyboard();
      // Hide the mobile bottom nav so the chat input sits on the keyboard:
      {isMobile && !isOpen && <BottomNavigation … />}

    Settings

    Member Visibility