Device & Context Hooks

Hooks for reading device metadata, safe areas, and keyboard state.

`useDeviceInfo()`

Read device, browser, and OS metadata. Values are set once on mount and rarely change.


const { device, browser, os } = useDeviceInfo()
 
if (device.isMobile) {
  // mobile-specific layout
}

os

Field	Type	Description
`name`	`string`	Operating system name
`timezone`	`string`	OS timezone

device

Field	Type	Description
`type`	`string`	Device type (`"desktop"`, `"mobile"`, `"tablet"`)
`isMobile`	`boolean`	True on mobile devices
`isTablet`	`boolean`	True on tablets
`screenWidth`	`number`	Screen width in pixels
`screenHeight`	`number`	Screen height in pixels
`viewportWidth`	`number`	Viewport width in pixels
`viewportHeight`	`number`	Viewport height in pixels
`colorDepth`	`number`	Display color depth
`pixelRatio`	`number`	Device pixel ratio

browser

Field	Type	Description
`name`	`string`	Browser name
`version`	`string`	Browser version
`userAgent`	`string`	Full user agent string
`cookieEnabled`	`boolean`	Whether cookies are enabled
`online`	`boolean`	Whether the browser is online
`language`	`string`	Browser language

Returns CSS safe area insets in pixels. Useful for positioning fixed elements on notched devices. Updates on resize.


const { bottom } = useSafeArea()
 
return <div style={{ position: 'fixed', bottom: 0, paddingBottom: bottom }} />

Detect the virtual keyboard on mobile devices. Uses the VirtualKeyboard API where available, with a visualViewport fallback for Safari.


const { isOpen, height } = useKeyboard()
 
return <div style={{ paddingBottom: isOpen ? height : 0 }} />

Property	Type	Description
`isOpen`	`boolean`	Whether the virtual keyboard is visible
`height`	`number`	Keyboard height in pixels (0 when closed)