---
name: "SmartDevicesManager.on"
mode: "api"
versionRequirements:
  - { name: "@ray-js/panel-sdk", version: "1.16.0" }
title: "on"
---

## SmartDevicesManager.on

> [VERSION] @ray-js/panel-sdk >= 1.16.0

> 💡 Common event types include: add, init, initComplete, initProgress, delete, dpDataChange, deviceOnlineStatusUpdate / deviceInfoUpdated, networkStatusChange, bluetoothAdapterStateChange.

### Description

Subscribe to multi-device manager change events. Inside SdmProvider, multi-device Hooks are already refreshed via the change event, so manual listeners are usually unnecessary. Use only to observe device state changes outside the Provider (e.g., global logging, non-React components).

### Parameters

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `event` | `"change"` | Yes | Event name, fixed to change |
| `handler` | `(event: { type: string; [key: string]: any }) => void` | Yes | Event callback |

### Return Value

None


### Examples

#### Listen for different event types and inspect the returned payload

```ts
manager.on('change', event => {
  switch (event.type) {
    case 'add':
    case 'init':
      console.log(event.key, event.instance);
      break;
    case 'initProgress':
      console.log(event.progress.total, event.progress.initialized, event.progress.keys);
      break;
    case 'dpDataChange':
    case 'deviceOnlineStatusUpdate':
    case 'deviceInfoUpdated':
      console.log(event.key, event.instance, event.data);
      break;
    case 'networkStatusChange':
    case 'bluetoothAdapterStateChange':
      console.log(event.data);
      break;
    case 'initComplete':
      console.log('all initialized');
      break;
    case 'delete':
      console.log(event.key);
      break;
  }
});
```