The Connectivity API enables POS UI extensions to retrieve device connectivity information, such as whether the device has an internet connection.
Creates a subscription to changes in connectivity. Provides an initial value and a callback to subscribe to value changes.
Whether the device is connected to the internet
'Connected' | 'Disconnected'
The Connectivity API enables POS UI extensions to retrieve device connectivity information, such as whether the device has an internet connection.
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 />);
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);
});
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 />);
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);
});