@ray-js/panel-sdk

English | 简体中文

@ray-js/panel-sdk

Ray Panel Mini App Base JS SDK

Installation

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

Basic Usage

Utility Methods

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

Hooks

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 and search for Smart Device Model.

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>
  );
}