Connectivity API

The Connectivity API enables POS UI extensions to retrieve device connectivity information, such as whether the device has an internet connection.

ConnectivityApi

ConnectivityApiContent

subscribable

Creates a subscription to changes in connectivity. Provides an initial value and a callback to subscribe to value changes.

ConnectivityState

internetConnected

Whether the device is connected to the internet

ConnectivityStateSeverity

'Connected' | 'Disconnected'

Examples

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);
});