Device APIAPIs
APIs
The Device API allows the UI Extension to retrieve device information including the device name and ID.
Anchor to deviceapiDeviceApi
- Anchor to namenamestringrequired
The name of the device
- Anchor to getDeviceIdgetDeviceId() => Promise<string>required
The string ID of the device
- Anchor to isTabletisTablet() => Promise<boolean>required
Whether the device is a tablet
DeviceApiContent
- name
The name of the device
string - getDeviceId
The string ID of the device
() => Promise<string> - isTablet
Whether the device is a tablet
() => Promise<boolean>
export interface DeviceApiContent {
/**
* The name of the device
*/
name: string;
/**
* The string ID of the device
*/
getDeviceId(): Promise<string>;
/**
* Whether the device is a tablet
*/
isTablet(): Promise<boolean>;
}Was this section helpful?
Anchor to examplesExamples
Examples of using the Device API.
Anchor to example-retrieve-name-of-the-device.Retrieve name of the device.
Anchor to example-retrieve-the-id-of-the-device.Retrieve the ID of the device.
Anchor to example-check-if-device-is-a-tablet.Check if device is a tablet.
Was this section helpful?
Retrieve name of the device.
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 />);
examples
Retrieve name of the device.
React
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); });Retrieve the ID of the device.
React
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); });Check if device is a tablet.
React
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); });