useDevice - Implemented based on the sdm instance, triggers component re-renders when smart device info, network status, Bluetooth status, and other data change

Device SupportGroup Partial Support

useDevice(selector?: (device: DeviceData) => any;, equalityFn?: (prevDeviceData: DeviceData, nextDeviceData: DeviceData) => boolean;)

Requires:

@ray-js/panel-sdk≥1.2.0

Built on the sdm instance. Must be used inside SdmProvider.Read the full notes

Built on the sdm instance. Must be used inside SdmProvider.
Before use, make sure SdmProvider is mounted in your project. For integration, see Smart Device Model - Usage. For brand-new projects, you can start from the public-sdm example project. Online status vs network status (keep them distinct):
- To determine whether the device is online, use device.devInfo.isOnline (aggregated cloud/local online status).
- device.network reflects the current phone’s network environment (shared by all devices). isConnected indicates whether the phone is connected to the internet, and networkType is the network type; it does not include device online information and has no isOnline field.

Description

Get device info, DP schema, network status, and Bluetooth status; re-renders the component when data changes. If no selector is provided, returns the full DeviceData and any field change triggers a re-render. It is recommended to always provide a selector to pick only the required fields to optimize rendering performance

Parameters

Parameter	Type	Required	Description
`selector`	(device: DeviceData) => any;	No	Selector function; the input is a device data object containing devInfo, dpSchema, network, and bluetooth. The return type is determined by the selector and can be any value
`equalityFn`	(prevDeviceData: DeviceData, nextDeviceData: DeviceData) => boolean;	No	Custom comparator; returning true prevents re-render

Return Value

Type: DeviceData

The return type is determined by the selector and can be any value

Referenced Types

typeDeviceData

Property	Type	Required	Description
		Yes	Device information (includes codeIds/idCodes for DP Code ↔ ID cross‑lookup)
		Yes	Collection of DP models (keyed by dpCode)
		Yes	The current phone’s network connection status (shared by all devices; not the device’s online status; to check whether a device is online, see devInfo.isOnline)
`bluetooth`	{ available: boolean; }	Yes	Bluetooth adapter status

typeCapability

export type Capability = number;

typeDevAttribute

export type DevAttribute = number;

Valid Values

`DevInfo.schema.mode`

Value	Description	Since
`rw`	-	-
`ro`	-	-
`wr`	-	-

`DevInfo.schema.property.type`

Value	Description	Since
`string`	-	-
`bool`	-	-
`value`	-	-
`enum`	-	-
`bitmap`	-	-
`raw`	-	-

`DevInfo.schema.type`

Value	Description	Since
`raw`	-	-
`obj`	-	-

`FunConfig.tyabirysr4_app`

Value	Description	Since
`follow`	-	-
`--app-B1`	-	-

`FunConfig.tyabis5d9w_app`

Value	Description	Since
`follow`	-	-
`--app-M1`	-	-

`DpSchema.mode`

Value	Description	Since
`rw`	-	-
`ro`	-	-
`wr`	-	-

`DpSchema.property.type`

Value	Description	Since
`string`	-	-
`bool`	-	-
`value`	-	-
`enum`	-	-
`bitmap`	-	-
`raw`	-	-

`DpSchema.type`

Value	Description	Since
`raw`	-	-
`obj`	-	-

Examples

Get complete device data

import { useDevice } from '@ray-js/panel-sdk';

function Home() {
  const { devInfo, network } = useDevice();
  return <Text>{devInfo.name} - Network: {network.isConnected ? 'Connected' : 'Disconnected'}</Text>;
}

Subscribe to network status

import { useDevice } from '@ray-js/panel-sdk';

function Home() {
  const isConnected = useDevice(device => device.network.isConnected);
  return <Text>Network: {isConnected ? 'Connected' : 'Disconnected'}</Text>;
}

Custom rerender

// Only update when the network connection changes
const network = useDevice(
  device => device.network,
  (prev, next) => prev.isConnected === next.isConnected,
);

Get the collection of DP models

const dpSchema = useDevice(device => device.dpSchema);
// dpSchema: { switch_led: { code, property, type, mode, ... }, ... }

Cross-lookup DP Code ↔ ID via codeIds / idCodes

const devInfo = useDevice(device => device.devInfo);
const dpId = devInfo.codeIds['switch_led'];   // code → id
const dpCode = devInfo.idCodes[1];             // id → code

Group environment compatibility

// In a group, devInfo is actually GroupInfo; some fields need adaptation
import { useDevice } from '@ray-js/panel-sdk';
import { Text, getLaunchOptionsSync } from '@ray-js/ray';

function Home() {
  const isGroup = !!getLaunchOptionsSync()?.query?.groupId;
  const devInfo = useDevice(d => d.devInfo);

  const id = isGroup ? devInfo.groupId : devInfo.devId;
  const name = devInfo.name || (isGroup ? devInfo.groupName : 'Device');
  const isOnline = isGroup
    ? devInfo.deviceList?.some(d => d.isOnline)
    : devInfo.isCloudOnline;

  return <Text>{name}({id}) - {isOnline ? 'Online' : 'Offline'}</Text>;
}