@empathyco/x-components/docs/API-reference/api/x-components.createusedevice.md

Empathy X Components

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [createUseDevice](./x-components.createusedevice.md)

## createUseDevice() function

Factory function that creates a composable for device detection using the devices parameter to configure breakpoints.

**Signature:**

```typescript
export declare function createUseDevice<Device extends string>(devices: Record<Device, number>): () => UseDeviceReturn<Device>;
```

## Parameters

<table><thead><tr><th>

Parameter


</th><th>

Type


</th><th>

Description


</th></tr></thead>
<tbody><tr><td>

devices


</td><td>

Record&lt;Device, number&gt;


</td><td>

An object containing the breakpoints, where the key is the name of the device and the value is the screen width.


</td></tr>
</tbody></table>

**Returns:**

() =&gt; [UseDeviceReturn](./x-components.usedevicereturn.md)<!-- -->&lt;Device&gt;

A composable which provides multiple reactive flags and values for detecting the current device. The flags names depends on the names passed in the `devices` parameter.

## Remarks

The `orientation` only works for orientation-sensor devices (mobile, tablet, etc). If in a desktop, the height of the window is larger than the width, the orientation will be `landscape`<!-- -->.

## Example

´´´typescript const useDevice = createUseDevice(<!-- -->{ mobile: 0, tablet: 744, desktop: 1024 }<!-- -->); const { isMobile, isMobileOrLess, isMobileOrGreater, isTablet, isTabletOrLess, isTabletOrGreater, isDesktop, isDesktopOrLess, isDesktopOrGreater, deviceName, orientation, istTouchable } = useDevice();