1 min read



This component helps to detect or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the XComponentAliasAPI.device property.


Name Description Type Default
breakpoints Record of the device name, that can be whatever you want xs, mobile, big... And
the max width in pixels for that device.
Record () => ({})
force Forces a device, ignoring the DeviceDetector.breakpoints prop. Device
throttleMs Time in milliseconds to throttle the resize events used to detect the device. number 100


This component emits the following events:

See it in action

This component renders no element to the DOM, but serves as way to safely detect or set the device name given an object containing all the possible breakpoints.

Try resizing the browser window!

Play with props

In this example, the DeviceDetector has been forced to always detect the mobile device. No matter what the window width is.

Try resizing the window to check that it never changes

Play with events

In this example, the DeviceDetector will emit a DeviceProvided event, with the new device as the payload. This device is stored in a data variable and then displayed.

Try resizing the browser window!