DeviceDetector

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.

Props

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

Events

This component emits the following events:

• DeviceProvided (opens new window)

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!