# Device API

The Device API allows the UI Extension to retrieve device information including the device name and ID.

## DeviceApi

### DeviceApiContent

### getDeviceId

value: `() => Promise<string>`

The string ID of the device

### isTablet

value: `() => Promise<boolean>`

Whether the device is a tablet

### name

value: `string`

The name of the device

## Examples

The Device API allows the UI Extension to retrieve device information including the device name and ID.



```tsx
import React, { useState } from 'react';
import {
  Tile,
  useApi,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {
  const api = useApi<'pos.home.tile.render'>();

  return (
    <Tile
      title='My App'
      subtitle={api.device.name}
      enabled
    />
  );
};

export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);

```

```ts
import {
  Tile,
  Screen,
  Navigator,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: api.device.name,
    enabled: true,
  });

  root.append(tile);
});

```



```tsx
import React, { useState } from 'react';
import {
  Tile,
  useApi,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {
  const api = useApi<'pos.home.tile.render'>();

  return (
    <Tile
      title='My App'
      subtitle={api.device.getDeviceId()}
      enabled
    />
  );
};

export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);

```

```ts
import {
  Tile,
  Screen,
  Navigator,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: api.device.getDeviceId(),
    enabled: true,
  });

  root.append(tile);
});

```



```tsx
import React, { useState } from 'react';
import {
  Tile,
  useApi,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {
  const api = useApi<'pos.home.tile.render'>();

  return (
    <Tile
      title='My App'
      enabled={api.device.isTablet()}
    />
  );
};

export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);

```

```ts
import {
  Tile,
  Screen,
  Navigator,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    enabled: api.device.isTablet(),
  });

  root.append(tile);
});

```

## Examples

The Device API allows the UI Extension to retrieve device information including the device name and ID.



```tsx
import React, { useState } from 'react';
import {
  Tile,
  useApi,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {
  const api = useApi<'pos.home.tile.render'>();

  return (
    <Tile
      title='My App'
      subtitle={api.device.name}
      enabled
    />
  );
};

export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);

```

```ts
import {
  Tile,
  Screen,
  Navigator,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: api.device.name,
    enabled: true,
  });

  root.append(tile);
});

```



```tsx
import React, { useState } from 'react';
import {
  Tile,
  useApi,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {
  const api = useApi<'pos.home.tile.render'>();

  return (
    <Tile
      title='My App'
      subtitle={api.device.getDeviceId()}
      enabled
    />
  );
};

export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);

```

```ts
import {
  Tile,
  Screen,
  Navigator,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    subtitle: api.device.getDeviceId(),
    enabled: true,
  });

  root.append(tile);
});

```



```tsx
import React, { useState } from 'react';
import {
  Tile,
  useApi,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridTile = () => {
  const api = useApi<'pos.home.tile.render'>();

  return (
    <Tile
      title='My App'
      enabled={api.device.isTablet()}
    />
  );
};

export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);

```

```ts
import {
  Tile,
  Screen,
  Navigator,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.tile.render', (root, api) => {
  const tile = root.createComponent(Tile, {
    title: 'My App',
    enabled: api.device.isTablet(),
  });

  root.append(tile);
});

```