---
title: Connectivity API
description: >-
  The Connectivity API enables POS UI extensions to retrieve device connectivity
  information, such as whether the device has an internet connection.
api_version: 2024-04
api_name: pos-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis/connectivity-api'
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis/connectivity-api.md
---

# Connectivity APIAPIs

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

## ConnectivityApi

* subscribable

  RemoteSubscribable\<ConnectivityState>

  required

  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

  ```ts
  ConnectivityStateSeverity
  ```

```ts
export interface ConnectivityState {
  /**
   * Whether the device is connected to the internet
   */
  internetConnected: ConnectivityStateSeverity;
}
```

### ConnectivityStateSeverity

```ts
'Connected' | 'Disconnected'
```

## Examples

Examples of using the Connectivity API

### Examples

* #### Subscribe to connectivity changes.

  ##### React

  ```tsx
  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

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