Connectivity APIAPIs
APIs
The Connectivity API enables POS UI extensions to retrieve device connectivity information, such as whether the device has an internet connection.
Anchor to connectivityapiConnectivityApi
- Anchor to subscribablesubscribableRemoteSubscribable<>required
Creates a subscription to changes in connectivity. Provides an initial value and a callback to subscribe to value changes.
ConnectivityApiContent
- subscribable
Creates a subscription to changes in connectivity. Provides an initial value and a callback to subscribe to value changes.
RemoteSubscribable<ConnectivityState>
export interface ConnectivityApiContent {
/**
* Creates a subscription to changes in connectivity.
* Provides an initial value and a callback to subscribe to value changes.
*/
subscribable: RemoteSubscribable<ConnectivityState>;
}ConnectivityState
- internetConnected
Whether the device is connected to the internet
ConnectivityStateSeverity
export interface ConnectivityState {
/**
* Whether the device is connected to the internet
*/
internetConnected: ConnectivityStateSeverity;
}ConnectivityStateSeverity
'Connected' | 'Disconnected'Was this section helpful?
Anchor to examplesExamples
Examples of using the Connectivity API
Anchor to example-subscribe-to-connectivity-changes.Subscribe to connectivity changes.
Was this section helpful?
Subscribe to connectivity changes.
import React from 'react';
import {
Tile,
useConnectivitySubscription,
reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';
const SmartGridTile = () => {
const connectivity = useConnectivitySubscription();
return (
<Tile
title='My App'
enabled={connectivity.internetConnected === 'Connected'}
/>
);
};
export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);
examples
Subscribe to connectivity changes.
React
import React from 'react'; import { Tile, useConnectivitySubscription, reactExtension, } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const connectivity = useConnectivitySubscription(); return ( <Tile title='My App' enabled={connectivity.internetConnected === 'Connected'} /> ); }; export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);TS
import { Tile, ConnectivityState, 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: true, }); api.Connectivity.subscribable.subscribe( (newConnectivity: ConnectivityState) => { tile.updateProps({ enabled: newConnectivity.internetConnected === 'Connected', }); }, ); root.append(tile); });