---

title: DeviceDetector

---

# 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                 |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----------------------- |
| <code>breakpoints</code> | Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And<br />the max width in pixels for that device. | <code>Record<Device, MaxWidth></code> | <code>() => ({})</code> |
| <code>force</code>       | Forces a device, ignoring the breakpoints prop.                                                                                     | <code>Device</code>                   | <code></code>           |
| <code>throttleMs</code>  | Time in milliseconds to throttle the resize events used to detect the device.                                                       | <code>number</code>                   | <code>100</code>        |

## Events

This component emits the following events:

- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)

## 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!_

```vue live
<template>
  <div>
    <DeviceDetector :breakpoints="breakpoints" />
    {{ x.device }}
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { DeviceDetector } from "@empathyco/x-components/device";
import { use$x } from "../../../composables/use-$x";

const x = use$x();
const breakpoints = reactive({
  mobile: 600,
  tablet: 900,
  desktop: Number.POSITIVE_INFINITY,
});
</script>
```

### 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_

```vue live
<template>
  <div>
    <DeviceDetector force="mobile" :breakpoints="breakpoints" />
    {{ x.device }}
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { DeviceDetector } from "@empathyco/x-components/device";
import { use$x } from "../../../composables/use-$x";

const x = use$x();
const breakpoints = reactive({
  mobile: 600,
  tablet: 900,
  desktop: Number.POSITIVE_INFINITY,
});
</script>
```

### 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 ref and then displayed.

_Try resizing the browser window!_

```vue live
<template>
  <div>
    <DeviceDetector :breakpoints="breakpoints" @DeviceProvided="storeDevice" />
    {{ device }}
  </div>
</template>

<script setup>
import { DeviceDetector } from "@empathyco/x-components/device";
import { reactive, ref } from "vue";
const device = ref("unknown");
const breakpoints = reactive({
  mobile: 600,
  tablet: 900,
  desktop: Number.POSITIVE_INFINITY,
});
function storeDevice(newDevice) {
  device.value = newDevice;
}
</script>
```