Device SupportGroup Support

useProps(selector?: (props: DpState) => DpValue;, equalityFn?: (prevDpValue: DpValue, nextDpValue: DpValue) => boolean)

Requires:
@ray-js/panel-sdk≥1.2.0

Description

Get smart device DP states; re-renders the component when DPs change

Parameters

ParameterTypeRequiredDescription
selector(props: DpState) => DpValue;NoSelector function. The input is the full DP state in the current device context. Specific properties are inferred from the as const Schema defined in devices/schema.ts. Type mapping: bool → boolean, value/bitmap → number, enum/string/raw → string. See sample code
equalityFn(prevDpValue: DpValue, nextDpValue: DpValue) => booleanNoCustom comparator; returning true prevents re-render

Return Value

Type: DpValue
DP value returned by the selector; its type is based on the project-provided Schema and is inferred from property.type

Referenced Types

typeDpStateDatapoint status object, where the key is the datapoint code and the value is the datapoint value.
export type DpState = Record<string, DpValue>;
typeDpValueDatapoint value type, which can be boolean, number, or string.
export type DpValue = boolean | number | string;

Examples

Basic usage

// 1. devices/schema.ts — 'as const' is the cornerstone of type inference; based on the project's Schema, value types are inferred automatically by property.type
export const schema = [
  { code: 'switch_led', property: { type: 'bool' }, type: 'obj', mode: 'rw', id: 1, name: 'Switch' },
  { code: 'work_mode', property: { type: 'enum', range: ['white', 'colour'] }, type: 'obj', mode: 'rw', id: 2, name: 'Mode' },
  { code: 'brightness', property: { type: 'value', min: 10, max: 1000, step: 1 }, type: 'obj', mode: 'rw', id: 3, name: 'Brightness' },
  { code: 'fault', property: { type: 'bitmap', maxlen: 8 }, type: 'obj', mode: 'ro', id: 4, name: 'Fault' },
  { code: 'colour_data', property: { type: 'string', maxlen: 14 }, type: 'obj', mode: 'rw', id: 5, name: 'Colour' },
] as const;

// 2. useProps — Automatically infer value types by property.type
import { useProps } from '@ray-js/panel-sdk';

const power = useProps(dpState => dpState.switch_led);       // → boolean
const mode = useProps(dpState => dpState.work_mode);         // → string
const bright = useProps(dpState => dpState.brightness);      // → number
const fault = useProps(dpState => dpState.fault);            // → number
const colour = useProps(dpState => dpState.colour_data);     // → string

Custom rerender

// Without a selector, the full state is returned, so any DP change triggers a rerender
const dpState = useProps(
  dpState => dpState,
  (prevDpValue, nextDpValue) => prevDpValue.switch_led === nextDpValue.switch_led, // Rerenders only when this returns false
);

Get all DP states

// Unless the current page or component needs to listen to changes of all DPs, do not use this approach; it may cause performance issues and frequent redundant re-renders.
import { useProps } from '@ray-js/panel-sdk';

const dpState1 = useProps();
const dpState2 = useProps(props => props);