English | [简体中文](./README-zh_CN.md)

> Smart Device Model

## Installation

```sh
$ npm install @ray-js/panel-sdk
# or
$ yarn add @ray-js/panel-sdk
# or
$ pnpm add @ray-js/panel-sdk
```

## Usage

```typescript
import { SmartDeviceModel } from '@ray-js/panel-sdk';

// SmartDevices comes from typings/sdm.d.ts，negligible for non Typescript developers
export const devices = {} as SmartDevices;

SmartDeviceModel.init<SmartDeviceSchema>().then(device => {
  /**
   * It is recommended that the name of the smart device be used as the key name for assignment
   */
  devices.robot = device;
});

devices.robot.model.actions.power.toggle();
```

## Ray / React Project

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

const { initPanelEnvironment } = kit;

interface Props {
  children: React.ReactNode;
}

initPanelEnvironment({ useDefaultOffline: true });

export default class App extends React.Component<Props> {
  onLaunch() {
    console.info('=== App onLaunch');
  }

  render() {
    return <SdmProvider value={devices.robot}>{this.props.children}</SdmProvider>;
  }
}
```

```tsx
// src/pages/home/index.tsx
import React from 'react';
import { Button, View } from '@ray-js/components';
import { devices } from '@/devices';

export default function Home() {
  const device = devices.robot;
  return (
    <View>
      <Button onClick={() => device.model.actions.power.toggle()}>Click me toggle power</Button>
    </View>
  );
}
```