useIsMobile

True below the 768px phone breakpoint.

HooksEnvironment@gaudi/design-system/hooks/environment/use-mobileView in Storybook Source

The breakpoint the AppShell sidebar and DateSelector use to switch to their phone layouts. False during server rendering and hydration.

Usage

import { useIsMobile } from '@gaudi/design-system/hooks';
const isMobile = useIsMobile();return isMobile ? <Drawer>{filters}</Drawer> : <aside>{filters}</aside>;

Examples

API

1 return value

Accessibility

Switching layouts must not remove features: the phone layout should reach the same actions, often through a Sheet or Drawer.

Notes

Built on useMediaQuery; use that directly for other breakpoints.

App ShellApplication frames: a simple AppShell (rail or top bar, header, content, detail rail and status bar) and the Sidebar parts for collapsible icon rails, floating and inset sidebars, nested groups, secondary panels and right-hand inspectors.19 examples useMediaQueryTrack a CSS media query, SSR-safe.SheetA panel that slides in from an edge over a dimmed page, for side tasks such as settings, details, comments, notifications or an assistant, without leaving the current screen.8 examples