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

# @ray-js/panel-sdk

[![latest](https://img.shields.io/npm/v/@ray-js/panel-sdk/latest.svg)](https://www.npmjs.com/package/@ray-js/panel-sdk) [![download](https://img.shields.io/npm/dt/@ray-js/panel-sdk.svg)](https://www.npmjs.com/package/@ray-js/panel-sdk)

> Ray Panel Mini App Base JS SDK

## Installation

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

## Basic Usage

### Utility Methods

```javascript
import { utils } from '@ray-js/panel-sdk';
 
utils.toFixed('111', 5); // '00111'
```

### Hooks

```jsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useScreenAlwaysOn } from '@ray-js/panel-sdk';
 
export default () => {
  useScreenAlwaysOn();
  return (
    <View>
      Keep the device screen always on, effective in the current component, ineffective when the current component is unmounted
    </View>
  );
};
```

## Smart Device Model

> Use the `useProps` and `useActions` hooks to get the properties and methods of the device model. For detailed access documentation, please refer to the [MiniApp Developer Documentation](https://developer.tuya.com/en/miniapp/) and search for Smart Device Model.

```tsx
import React from 'react';
import { Button, View, Text } from '@ray-js/ray';
import { useActions, useProps } from '@ray-js/panel-sdk';
 
export default function Home() {
  const power = useProps(props => props.power);
  const actions = useActions();
  return (
    <View>
      <Button onClick={() => actions.power.toggle()}>
        Click me to toggle the device switch state
      </Button>
      <Text>{`Switch state: ${power}`}</Text>
    </View>
  );
}
```