DeviceTypeProvider

DeviceTypeProvider is an optional React Context provider to enable device-specific UI for Gestalt components that support it.

Gestalt components that require DeviceTypeProvider to enable their mobile user interfaces have a Mobile variant section in their documentation page. Check each example to learn more about their particular implementations.

Props

Component props
Name
Type
Default
children
Required
React.Node
-
deviceType
Required
"desktop" | "mobile"
-

The device type as determined by logic within your app.

Implementation

Gestalt components can have different interfaces depending on the user's device. We currently support "desktop" and "mobile".

Components default to a responsive "desktop" UI. DeviceTypeProvider is required to enable mobile-specific variants where available.

This provider should be implemented at the top level of your app. Any additional nested DeviceTypeProviders will override the top-level configuration.

While device detection can (for now) be performed using the user-agent string, this is not generally recommended. Thankfully, there are better solutions!

The example shows a component with different desktop and mobile UIs.

Edit page on GitHub
; Opens a new tab