newOS for Developers

useIsWideScreen

hook50 lines

Detects if the viewport is "wide" (desktop) or narrow (mobile), with additional utilities for app height and collapse-to-bottom layouts.

Source Path

apps/web/hooks/useIsWideScreen.tsx

Package

@newos/web

Exports

useIsWideScreen()

Main hook returning boolean for wide screen detection.

useIsWideScreen(): boolean | undefined

useCollapseToBottom()

Advanced hook for bottom-collapsing mobile layouts with menu height calculation.

useCollapseToBottom(
  collapseToBottom?: boolean,  // Enable collapse behavior
  level?: number,              // Menu level (default: 1)
  baseLevel?: number           // Base level offset (default: 0)
): [
  doCollapse: boolean,         // Should collapse?
  menuHeight: string,          // CSS height for menu
  contentHeight: string,       // CSS height for content
  isWide: boolean              // Wide screen status
]

svh100

CSS variable reference for safe viewport height.

const svh100 = "var(--app-height)";

Breakpoint Logic

// Uses ahooks useResponsive()
const resp = useResponsive(); // { xs, sm, md, lg, xl }
const wideScreen = resp.lg || resp.xl;

Returns true when viewport is lg (≥992px) orxl (≥1200px) breakpoint.

Key Features

--app-height CSS Variable

Sets --app-height CSS variable on resize for safe viewport height. Handles mobile browser address bar properly.

Collapse-to-Bottom Layout

useCollapseToBottom calculates heights for mobile layouts where menus collapse to bottom of screen.

Menu Level Calculation

Uses 60px per level (unit = 60). Multiple levels stack for nested bottom menus.

Usage Examples

Basic Usage

import { useIsWideScreen } from "@/hooks/useIsWideScreen";

function ResponsiveComponent() {
  const isWide = useIsWideScreen();

  return (
    <div>
      {isWide ? (
        <DesktopLayout />
      ) : (
        <MobileLayout />
      )}
    </div>
  );
}

Collapse Layout

import { useCollapseToBottom, svh100 } from "@/hooks/useIsWideScreen";

function MobileLayout() {
  const [doCollapse, menuHeight, contentHeight] = useCollapseToBottom(
    true,  // Enable collapse
    1      // Single level menu
  );

  return (
    <div style={{ height: svh100 }}>
      <main style={{ height: contentHeight }}>
        {/* Content */}
      </main>
      {doCollapse && (
        <nav style={{ height: menuHeight }}>
          {/* Bottom menu */}
        </nav>
      )}
    </div>
  );
}

Edge Cases & Gotchas

Initial undefined — useIsWideScreen() may returnundefined on first render (SSR/hydration). Handle gracefully.

Resize Listener — useCollapseToBottom adds a resize event listener. Cleanup is handled in useEffect return.

Capacitor Detection — File imports Capacitor but doesn't useCapacitor.getPlatform(). Future-proofing for mobile apps.

ahooks Dependency — Uses useResponsive from ahooks which provides the breakpoint detection.

UserCard FolderCore ChatInputuseResponsive (ahooks)

View source on GitHub →