English | 简体中文

@ray-js/sdm-react

Smart Device Model React Binding

Installation

$ npm install @ray-js/sdm-react
# or
$ yarn add @ray-js/sdm-react
# or
$ pnpm add @ray-js/sdm-react

Usage

// src/app.tsx
import React from 'react';
import 'ray';
import '@/i18n';
import { kit } from '@ray-js/panel-sdk';
import { SdmProvider } from '@ray-js/sdm-react';
import { devices } from '@/devices';

const { initPanelEnvironment } = kit;

interface Props {
  children: React.ReactNode;
}

initPanelEnvironment({ useDefaultOffline: true });

export default class App extends React.Component<Props> {
  render() {
    return <SdmProvider value={devices.robot}>{this.props.children}</SdmProvider>;
  }
}

useSdmProps

import React from 'react';
import { View } from '@ray-js/components';
import { useSdmProps } from '@ray-js/sdm-react';

export default function PageSdm() {
  const dpState = useSdmProps(
    d => d,
    (prevDpState, nextDpState) => prevDpState.power === nextDpState.power // only rerender when return false
  );
  const power = useSdmProps(props => props.power);
  return (
    <View style={{ flex: 1 }}>
      <View>dpState: {JSON.stringify(dpState)}</View>
      <View>power: {JSON.stringify(power)}</View>
    </View>
  );
}

useSdmDevice

import React from 'react';
import { View } from '@ray-js/components';
import { useSdmProps } from '@ray-js/sdm-react';

export default function PageSdm() {
  const network = useSdmDevice(
    device => device.network,
    (prevNetwork, nextNetwork) => prevNetwork.isConnected === nextNetwork.isConnected // only rerender when return false
  );
  const isConnected = useSdmDevice(device => device.network.isConnected);
  return (
    <View style={{ flex: 1 }}>
      <View>network.isConnected: {JSON.stringify(isConnected)}</View>
    </View>
  );
}