open-index/open-npm huggingface dataset:
npm package: @ray-js/inner-audio-player
Description: 基于ttt InnerAudioContext能力实现的音频播放器组件
Latest version: 0.0.2

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

# @ray-js/inner-audio-player

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

> An audio player component based on TTT InnerAudioContext capabilities

- Please ensure that the BaseKit version is 3.19.0 or above
- Use Smart Life 6.3.0 or above to preview the experience

## Installation

```sh
$ npm install @ray-js/inner-audio-player
# or
$ yarn add @ray-js/inner-audio-player
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import InnerAudioPlayer from '@ray-js/inner-audio-player';
import { View } from '@ray-js/ray';
export default () => {
  const path = 'xxx.mp3';
  return (
    <View>
      <InnerAudioPlayer filePath={path} />
    </View>
  );
};
```
npm package: @ray-js/ipc-ptz-zoom
Description: 方向Ptz组件及Zoom缩放
Latest version: 0.0.3

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

# @ray-js/ipc-ptz-zoom

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

> 方向 Ptz 组件及 Zoom 缩放

## Installation

```sh
$ npm install @ray-js/ipc-ptz-zoom
# or
$ yarn add @ray-js/ipc-ptz-zoom
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import PtzZoom from '@ray-js/ipc-ptz-zoom';
export default () => <PtzZoom />;
```
npm package: @ray-js/lamp-annulus-color-picker
Description: 照明环形色盘组件
Latest version: 1.1.0

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

# @ray/lamp-annulus-color-picker

[![latest](https://img.shields.io/npm/v/@ray/lamp-annulus-color-picker/latest.svg)](https://www.npmjs.com/package/@ray/lamp-annulus-color-picker) [![download](https://img.shields.io/npm/dt/@ray/lamp-annulus-color-picker.svg)](https://www.npmjs.com/package/@ray/lamp-annulus-color-picker)

> 照明环形色盘组件

## Installation

```sh
$ npm install @ray/lamp-annulus-color-picker
# or
$ yarn add @ray/lamp-annulus-color-picker
```

## Usage

```tsx
import Foo from '@ray/lamp-annulus-color-picker';
export default () => <Foo />;
```
npm package: @ray-js/lamp-color-card
Description: 彩光色卡
Latest version: 1.1.8

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

# @ray-js/lamp-color-card

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

> LampColorCard

## Installation

```sh
$ npm install @ray-js/components-ty-lamp
# or
$ yarn add @ray-js/components-ty-lamp
```

## Usage

```tsx
interface IProps {
  /**
   * @description.zh hs颜色
   * @description.en HS color
   * @default {h:0,s:1000}
   */
  hs?: { h: number; s: number };

  /**
   * @description.zh 彩光色卡宽度
   * @description.en Color card width
   * @default 319
   */
  rectWidth?: number;
  /**
   * @description.zh 彩光色卡高度
   * @description.en Color card height
   * @default 133
   */
  rectHeight?: number;
  /**
   * @description.zh 选中按钮边框宽度
   * @description.en Select button border width
   * @default 2
   */
  thumbBorderWidth?: number;
  /**
   * @description.zh 选中按钮圆角
   * @description.en Select the button rounded corner
   * @default 4
   */
  thumbBorderRadius?: number;
  /**
   * @description.zh 选中按钮边框颜色
   * @description.en Select button border color
   * @default '#fff'
   */
  thumbBorderColor?: string;
  /**
   * @description.zh 点击结束事件
   * @description.en Click on the end event
   * callback function
   * @default '''
   */
  onTouchEnd?: (e: { h: number; s: number }) => void;
  /**
   * @description.zh 彩光色卡样式
   * @description.en Color card style
   * @default '''
   */
  rectStyle?: any;
  /**
   * @description.zh 容器样式
   * @description.en Container style
   * @default '''
   */
  containerStyle?: any;
}
```

```tsx
import { LampColorCard } from '@ray-js/components-ty-lamp';
export default () => {
  const [hsColor, setHsColor] = React.useState({ h: 0, s: 1000 });
  const handleEnd = (e: { h: number; s: number }) => {
    setHsColor(e);
  };

  return (
    <LampColorCard
      hs={hsColor}
      thumbBorderWidth={2}
      thumbBorderColor="#fff"
      thumbBorderRadius={4}
      onTouchEnd={handleEnd}
    />
  );
};
```
npm package: @ray-js/lamp-rect-picker-color
Description: 矩形色盘
Latest version: 1.1.18

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

# @ray-js/lamp-rect-picker-color

> lamp-rect-picker-color

## install

```sh
$ npm install @ray-js/components-ty-lamp
// or
$ yarn add @ray-js/components-ty-lamp
```

## Preview

![预览](https://images.tuyacn.com/smart/ui_design_pkg_icon/non-session-user/16729908911f238a2fc43.png)

## Usage

- Props And Methods

```js
type HS = { h: number, s: number };
type Props = {
  hs: HS, // Rectangular plate color values [reference linking](https://baike.baidu.com/item/HSV/547122?fr=aladdin)
  thumbRadius?: number, // The width of the rectangle color plate of thumb
  rectWidth?: number, // The width of the rectangle color wheel
  rectHeight?: number, // The height of the rectangular color wheel
  colorTipStyle?: string, // The prompt style
  borderRadius?: number, // Fillet value， The priority is lower than border radius style
  borderRadiusStyle?: string, // eg: 12px 12px 0 0; Same as border radius style Settings in the browser
  isShowColorTip?: boolean, // Whether to show color copy
  closed?: boolean, // Off state
  onTouchStart?: (hs: HS) => void, // Rectangular color wheel touch the start of the callback function
  onTouchMove?: (hs: HS) => void, // Rectangular color wheel touch mobile callback function ⚠ ️ note: move trigger high frequency can add throttling to improve performance
  onTouchEnd?: (hs: HS) => void, // Rectangular color wheel touch the end of the callback function
};
```

```tsx
import { LampRectPickerColor } from '@ray-js/components-ty-lamp';

const Main = () => {
  const [hs, setHS] = useState({
    h: 0,
    s: 1000,
  });
  const [closed, setClosed] = useState(false);
  const handleTouchStart = e => {
    console.log(e, 'handleTouchStart');
  };
  const handleTouchMove = e => {
    console.log(e, 'handleTouchMove');
  };
  const handleTouchEnd = e => {
    console.log(e, 'handleTouchEnd');
  };
  return (
    <LampRectPickerColor
      hs={hs}
      borderRadius={16} // Set the priority of rounded corners to be lower than border radius style
      borderRadiusStyle="16rpx 16rpx 0 0"
      rectWidth={344}
      rectHeight={200}
      thumbRadius={12}
      isShowColorTip
      closed={closed}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    />
  );
};
```

```js
// Turns on the use event channel property, which can be used in other rjs components
Render({
  // other xxx
  renderChannel() {
    const eventChannelName = 'lampRectPickerColorEventChannel';
    this.instance.eventChannel.on(eventChannelName, e => {
      // Here you can receive the color data that is passed when the color changes
      const {
        rgba, // [r, g , b, a]
        touchType, // : 'start' | 'move' | 'end'
        pos,
      } = e;
      console.log('eventChannel get', e);
    });
  },
});
```
npm package: @ray-js/lamp-rect-white-picker
Description: 矩形色盘
Latest version: 1.1.17

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

# @ray-js/lamp-rect-picker-color

> lamp-rect-picker-color

## install

```sh
$ npm install @ray-js/components-ty-lamp
// or
$ yarn add @ray-js/components-ty-lamp
```

## Usage

- Props And Methods

```js
type HS = { h: number, s: number };
type Props = {
  hs: HS, // Rectangular plate color values [reference linking](https://baike.baidu.com/item/HSV/547122?fr=aladdin)
  thumbRadius?: number, // The width of the rectangle color plate of thumb
  rectWidth?: number, // The width of the rectangle color wheel
  rectHeight?: number, // The height of the rectangular color wheel
  colorTipStyle?: string, // The prompt style
  borderRadius?: number, // Fillet value， The priority is lower than border radius style
  borderRadiusStyle?: string, // eg: 12px 12px 0 0; Same as border radius style Settings in the browser
  isShowTip?: boolean, // Whether to show color copy
  closed?: boolean, // Off state
  useEventChannel?: boolean // Whether to enable the event channel
  eventChannelName?: string; // Event channel name
  onTouchStart?: (hs: HS) => void, // Rectangular color wheel touch the start of the callback function
  onTouchMove?: (hs: HS) => void, // Rectangular color wheel touch mobile callback function ⚠ ️ note: move trigger high frequency can add throttling to improve performance
  onTouchEnd?: (hs: HS) => void, // Rectangular color wheel touch the end of the callback function
};
```

```tsx
import { LampRectWhitePicker } from '@ray-js/components-ty-lamp';

const Main = () => {
  const [temp, setTemp] = useState(100);
  const [closed, setClosed] = useState(false);
  const handleTouchStart = e => {
    console.log(e, 'handleTouchStart');
  };
  const handleTouchMove = e => {
    console.log(e, 'handleTouchMove');
  };
  const handleTouchEnd = e => {
    console.log(e, 'handleTouchEnd');
  };
  return (
    <LampRectWhitePicker
      temp={temp}
      borderRadius={16} // 设置圆角 优先级低于 borderRadiusStyle
      // borderRadiusStyle="62rpx 62rpx 0 0"
      rectWidth={340}
      rectHeight={200}
      thumbRadius={16}
      isShowTip
      closed={closed}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    />
  );
};
```

```js
// Turns on the use event channel property, which can be used in other rjs components
Render({
  // other xxx
  renderChannel() {
    const eventChannelName = 'lampCirclePickerWhiteEventChannel';
    this.instance.eventChannel.on(eventChannelName, e => {
      // Here you can receive the color data that is passed when the color changes
      const {
        data, // temp
        touchType, // : 'start' | 'move' | 'end'
        pos,
      } = e;
      console.log('eventChannel get', e);
    });
  },
});
```
npm package: @ray-js/lamp-rhythm-circle
Description: 照明生物节律色环
Latest version: 0.0.10

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

# @ray-js/lamp-rhythm-circle

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

> Lighting Biological Rhythm Circle

## Installation

```sh
$ npm install @ray-js/lamp-rhythm-circle
// or
$ yarn add @ray-js/lamp-rhythm-circle
```

## Usage

```tsx
import { useState } from 'react';
import RhythmCircle from '@ray-js/lamp-rhythm-circle';
import res from '../res';
import styles from './index.module.less';

export default function Home() {
  const [rhythmNode, setRhythmNode] = useState([
    {
      activeColor: '#CEECFE',
      time: 280,
      valid: true,
    },
    {
      activeColor: '#CE8040',
      time: 390,
      valid: true,
    },

    {
      activeColor: '#B3ABA8',
      time: 1020,
      valid: true,
    },
    {
      activeColor: '#1E272C',
      time: 1260,
      valid: true,
    },
  ]);

  const handleRelease = v => {
    const { value } = v;
    console.log(value, '--value');
    setRhythmNode([...value].sort((a, b) => a.time - b.time));
  };
  return (
    <View className={styles.view}>
      <RhythmsCircle
        innerRadius={110}
        radius={150}
        timeOffset={30}
        data={rhythmNode}
        iconList={[res.icon1_colour, res.icon2_colour, res.icon3_colour, res.icon4_colour]}
        onRelease={handleRelease}
      />
    </View>
  );
}
```
npm package: @ray-js/lamp-step-slider
Description: 间隔滑动条
Latest version: 0.0.1

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

# @ray/lamp-step-slider

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

> 间隔滑动条

## Installation

```sh
$ npm install @ray/lamp-step-slider
# or
$ yarn add @ray/lamp-step-slider
```

## Usage

```tsx
import StepSlider from '@ray/lamp-step-slider';

const [value, setValue] = React.useState(50);

<StepSlider value={value} min={20} max={200} step={20} forceStep onTouchEnd={setValue} />;
```
npm package: @ray-js/lamp-style-slider
Description: 照明样式的基础滑动条
Latest version: 0.0.7

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

# @ray-js/lamp-style-slider

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

> Basic sliding bars of lighting styles

## Installation

```sh
$ npm install @ray-js/lamp-style-slider
# or
$ yarn add @ray-js/lamp-style-slider
```

## Usage

### 1. Color temperature slider

```tsx
import OpacitySlider from '@ray-js/lamp-style-slider';

const [value, setValue] = useState(1000);
const handleMove = v => {
  // console.log('move====', v);
};

<OpacitySlider
  style={{
    paddingLeft: 16,
  }}
  label="色温"
  valueStyle={{ color: 'blue' }}
  disable={false}
  value={value}
  onTouchMove={handleMove}
  trackBackgroundColor="linear-gradient(270deg, #CDECFE 1.22%, #FFFFFF 45.36%, #FFFFFF 53.27%, #FFCA5C 98.32%)"
/>
```

### 2. Brightness slider

```tsx
import OpacitySlider from '@ray-js/lamp-style-slider';

const [value, setValue] = useState(1000);
const handleMove = v => {
  // console.log('move====', v);
};

<OpacitySlider
  style={{
    paddingLeft: 16,
  }}
  label="亮度"
  valueStyle={{ color: 'blue' }}
  min={1}
  disable={false}
  value={value}
  onTouchMove={handleMove}
  trackBackgroundColor="linear-gradient(270deg, #FFFFFF 2.57%, rgba(255, 255, 255, 0) 100.64%)"
  thumbColorFormatterConfig={{
    formatter: 'hsl(0deg 0% value%)',
    scale: 0.1,
  }}
/>
```

### 3. Hue slider

```tsx
import OpacitySlider from '@ray-js/lamp-style-slider';

const [value, setValue] = useState(1000);
const handleMove = v => {
  // console.log('move====', v);
};

<OpacitySlider
  style={{
    paddingLeft: 16,
  }}
  label="hue"
  valueStyle={{ color: 'blue' }}
  trackStyle={{ height: '100rpx' }}
  thumbStyle={{
    height: '100rpx',
    borderRadius: '20rpx',
    width: '40rpx',
    boxShadow: 'rgb(0 0 0 / 53%) 0px 1px 7px',
  }}
  min={0}
  max={360}
  disable={false}
  value={value}
  onTouchMove={handleMove}
  trackBackgroundColor="linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), linear-gradient(90.01deg, #FF0000 0.01%, #F8CB0E 12.14%, #80FE06 21.83%, #08FB2B 32.75%, #04FAFC 46.38%, #0243FC 58.38%, #8700F9 70.04%, #FC00EF 80.06%, #F00A5B 89.92%, #FF0000 99.99%)"
  thumbColorFormatterConfig={{
    formatter: 'hsl(valuedeg 100% 50%)',
  }}
/>
```
### 4. Saturation slider

```tsx
import OpacitySlider from '@ray-js/lamp-style-slider';

const [value, setValue] = useState(1000);
const handleMove = v => {
  // console.log('move====', v);
};

<OpacitySlider
  style={{
    paddingLeft: 16,
  }}
  label="saturation"
  valueStyle={{ color: 'blue' }}
  min={0}
  max={100}
  disable={false}
  value={value}
  onTouchMove={handleMove}
  trackBackgroundColor={`linear-gradient(90deg, rgba(255, 255, 255, 0), ${hsv2rgbString(
    0,
    100,
    100
  )})`}
  thumbColorFormatterConfig={{
    formatter: 'hsl(0deg 100% value%)',
    scale: 0.5,
  }}
/>
```
npm package: @ray-js/lamp-temp-slider
Description: 照明色温Slider
Latest version: 1.0.10

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

# @ray-js/lamp-temp-slider

> Lighting color temperature Slider

## Installation

```sh
$ npm install @ray-js/components-ty-lamp
# or
$ yarn add @ray-js/components-ty-lamp
```

## Usage

```ts
// property
export interface IProps {
  /**
   * @description.zh Prohibit sliding
   * @description.en Ban sliding
   * @default false
   */
  disable?: boolean;
  /**
   * @description.zh When the light is turned off slider的状态
   * @description.en The state of the slider when the light is off
   * @default false
   */
  closed?: boolean;
  /**
   * @description.zh Sliding slide style
   * @description.en Sliding groove style
   * @default {}
   */
  trackStyle?: React.CSSProperties;
  /**
   * @description.zh Sliding block style
   * @description.en Sliding block style
   * @default {}
   */
  thumbStyle?: React.CSSProperties;
  /**
   * @description.zh Slider value
   * @description.en slider value
   * @default 0
   */
  value: number;
  /**
   * @description.zh slider Triggered when the finger starts to drag
   * @description.en slider Value changes
   * @default () => {}
   */
  onTouchStart?: (value: number) => void;
  /**
   * @description.zh slider Triggered when the finger is dragged
   * @description.en slider Value changes
   * @default () => {}
   */
  onTouchMove?: (value: number) => void;
  /**
   * @description.zh slider Triggered when your fingers leave
   * @description.en Values change after the trigger
   * @default () => {}
   */
  onTouchEnd?: (value: number) => void;
}

export const defaultProps: IProps = {
  value: 0,
  onTouchStart: () => null,
  onTouchMove: () => null,
  onTouchEnd: () => null,
};
```

```tsx
import { LampTempSlider } from '@ray-js/components-ty-lamp';

export default () => {
  const [temp, setTemp] = useState(100);

  useEffect(() => {
    // Simulation DP report
    setTimeout(() => {
      setTemp(890);
    }, 1000);
  }, []);

  return (
    <LampTempSlider
      value={temp}
      onTouchEnd={val => {
        setTemp(val);
      }}
    />
  );
};
```
npm package: @ray-js/lamp-unfilled-corner-annulus-picker-white
Description: LampUnfilledCornerAnnulusPickerWhite
Latest version: 1.1.0

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

# @ray/lamp-unfilled-corner-annulus-picker-white

[![latest](https://img.shields.io/npm/v/@ray/lamp-unfilled-corner-annulus-picker-white/latest.svg)](https://www.npmjs.com/package/@ray/lamp-unfilled-corner-annulus-picker-white) [![download](https://img.shields.io/npm/dt/@ray/lamp-unfilled-corner-annulus-picker-white.svg)](https://www.npmjs.com/package/@ray/lamp-unfilled-corner-annulus-picker-white)

> LampUnfilledCornerAnnulusPickerWhite

## Installation

```sh
$ npm install @ray/lamp-unfilled-corner-annulus-picker-white
# or
$ yarn add @ray/lamp-unfilled-corner-annulus-picker-white
```

## Usage

```tsx
import Foo from '@ray/lamp-unfilled-corner-annulus-picker-white';
export default () => <Foo />;
```
npm package: @ray-js/lock-finger
Description: 指纹录制实时显示录制过程
Latest version: 0.0.6

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

# @ray-js/lock-finger

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

> Fingerprint recording shows the recording process in real time

## Installation

```sh
$ npm install @ray-js/lock-finger
# or
$ yarn add @ray-js/lock-finger
```

## Usage

### Finger Demo

```tsx
import Finger from '@ray-js/lock-finger';

    <Finger
        currentNumber={1}
        totalNumber={16}
        isError={false}
        tips={'tips'}
    />;
```
npm package: @ray-js/log4js
Description: 小程序日志组件
Latest version: 0.0.5

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

# @ray-js/log4js

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

> 小程序日志组件

## Installation

```sh
$ npm install @ray-js/log4js
# or
$ yarn add @ray-js/log4js
```

## Usage

```js
import log4js from '@ray-js/log4js';

// Set a log tag to make it easier to find
log4js.setTag('log4js');
// info log
log4js.info('info',  { info: 'info' });
// warn log
log4js.warn('warn',  { warn: 'warn' });
// performance log
log4js.performance('use time', 13);
// error log
log4js.error('error', { error: 'error' });
// info log is not written to the local log of the App
log4js.infoWithoutAppContext('info',  { info: 'info' });
// warn log is not written to the local log of the App
log4js.warnWithoutAppContext('warn',  { warn: 'warn' });
// performance log is not written to the local log of the App
log4js.performanceWithoutAppContext('use time', 13);
// error log is not written to the local log of the App
log4js.errorWithoutAppContext('error', { error: 'error' });
```
npm package: @ray-js/mini-lottie
Description: 小程序 Lottie 组件
Latest version: 0.1.0

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

# @ray-js/mini-lottie

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

> mini program Lottie

## Installation

```sh
$ npm install @ray-js/mini-lottie
# or
$ yarn add @ray-js/mini-lottie
```

## Usage

### Basic Usage

```tsx
import RayMiniLottie from '@ray-js/mini-lottie';

const lottieSource = require('xxx.json');

const [play, setPlay] = useState(false);

useEffect(() => {
  // Simulate click to play
  setTimeout(() => {
    setPlay(true);
  }, 3000);
}, []);

<RayMiniLottie
  source={lottieSource}
  width={375}
  height={135}
  loop={false}
  autoplay={false}
  play={play}
  style={{
    background: '#eee',
  }}
  onRenderFinished={() => {
    console.log('render finished');
  }}
/>;
```

### Advance Usage 1: Switch the playback source and status.

```tsx
<RayMiniLottie
  source={lottieSourceList[0]}
  className="mini-lottie111"
  width={355}
  height={105}
  play={play}
  style={{
    background: '#999',
    borderRadius: '10px',
  }}
  onRenderFinished={() => {
    console.log('onRenderFinished run');
  }}
/>
```

### Advance Usage 2: Display in Popup

```tsx
import RayMiniLottie from '@ray-js/mini-lottie';
import lottieSource from './example/path/xxx.json';
// Note: Since the Popup component is not displayed immediately, an isVisible check is required
{
  isVisible && (
    <Popup
      show={isVisible}
      overlayStyle={{
        backgroundColor: 'rgba(0, 0, 0, 0.4)',
      }}
      onClickOverlay={() => {
        setIsVisible(false);
      }}
      customStyle={{ backgroundColor: 'transparent' }}
    >
      <RayMiniLottie
        source={LottieSource}
        width={300}
        height={95}
        style={{
          background: '#eee',
        }}
      />
    </Popup>
  );
}
```

## FAQ:

- 1. `Uncaught (in promise) DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.`
  - Lottie json file with base64 image data is not supported
npm package: @ray-js/mp-audit-cli
Description: 用于小程序的体验评分工具 CLI，负责静态扫描部分以及评分生成
Latest version: 1.0.13

# Miniapp Audit CLI

一个用于小程序代码质量审核的命令行工具 (A command-line tool for miniapp code quality auditing)

## 功能特性 (Features)

该工具主要用于扫描和审核小程序代码，包含以下功能：

- 🎨 主题变量检查 (Theme Variables Check)
  - 扫描和检查 APP 主题相关变量的使用情况
  - 确保主题样式的一致性

- 🌓 暗黑模式适配检查 (Dark Mode Support Check)
  - 检查小程序是否正确支持暗黑模式
  - 识别可能在暗黑模式下显示异常的样式

- 🌐 多语言使用检查 (Multi-language Usage Check)
  - 扫描代码中的中文字符
  - 帮助识别需要国际化的文本

- 📦 图片资源检查 (Package Image Check)
  - 检测包内的图片资源
  - 分析图片使用情况

- 📊 质量评分 (Quality Score)
  - 根据多个维度计算代码质量评分
  - 生成详细的审核报告

## 使用方法 (Usage)

```bash
# 安装依赖
npm install

# 运行审核
npm run audit <project-path>
```

## 配置项 (Configuration)

工具支持以下配置：

- `excludeDirs`: 排除的目录，默认包含 `["node_modules", "dist", ".git", "typings", "scripts"]`
- `imageExtensions`: 支持的图片格式，默认包含 `[".png", ".jpg", ".jpeg", ".gif", ".webp"]`

## 输出报告 (Output Report)

工具会生成包含以下内容的审核报告：

- 总体评分
- 各项指标的详细得分
- 具体问题的位置和建议

## 贡献指南 (Contributing)

欢迎提交 Issue 和 Pull Request！

## 开源协议 (License)

[MIT License](LICENSE)
npm package: @ray-js/multi-socket-switch
Description: 用于排插品类设备处理开关，可支持单开及总开能力
Latest version: 0.0.4

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

# @ray-js/multi-socket-switch

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

> Used for processing switches for power strips and sockets, supporting single-open and total-open capabilities

## Installation

```sh
$ npm install @ray-js/multi-socket-switch
# or
$ yarn add @ray-js/multi-socket-switch
```

## Usage

Basic usage

```tsx
import MultiSocketSwitch from '@ray-js/multi-socket-switch';
export default () => (
  <MultiSocketSwitch
    style={{ width: 200 }}
    switchList={[
      { dpCode: 'swith_1', dpValue: true },
      { dpCode: 'swith_2', dpValue: true },
      { dpCode: 'swith_3', dpValue: false },
    ]}
    usbData={[
      { dpCode: 'usb_1', dpValue: true },
      { dpCode: 'usb_2', dpValue: false },
    ]}
    deviceId="123456"
  />
);
```

Multiple column usage

```tsx
import MultiSocketSwitch from '@ray-js/multi-socket-switch';
export default () => (
  <MultiSocketSwitch
    style={{ width: 400 }}
    switchList={[
      { dpCode: 'swith_1', dpValue: true },
      { dpCode: 'swith_2', dpValue: true },
      { dpCode: 'swith_3', dpValue: false },
      { dpCode: 'swith_4', dpValue: false },
      { dpCode: 'swith_5', dpValue: true },
      { dpCode: 'swith_6', dpValue: false },
    ]}
    usbData={[
      { dpCode: 'usb_1', dpValue: true },
      { dpCode: 'usb_2', dpValue: false },
    ]}
    usbLayout="horizontal"
    deviceId="123456"
    double
  />
);
```

Horizontal layout

```tsx
import MultiSocketSwitch from '@ray-js/multi-socket-switch';
export default () => (
  <MultiSocketSwitch
    switchList={[
      { dpCode: 'swith_1', dpValue: true },
      { dpCode: 'swith_2', dpValue: true },
    ]}
    usbData={[
      { dpCode: 'usb_1', dpValue: true },
      { dpCode: 'usb_2', dpValue: false },
    ]}
    deviceId="123456"
    layout="horizontal"
    usbLayout="horizontal"
  />
);
```

Custom

```tsx
import MultiSocketSwitch from '@ray-js/multi-socket-switch';
export default () => (
  <MultiSocketSwitch.Container style={{ width: 200 }}>
    <MultiSocketSwitch.MainSwitch value onClick={() => {}} />
    <MultiSocketSwitch.SubSwitch dpCode="switch_1" dpValue onClick={() => {}} />
    <MultiSocketSwitch.SubSwitch dpCode="switch_2" dpValue onClick={() => {}} />
    <MultiSocketSwitch.SubSwitch dpCode="switch_3" dpValue onClick={() => {}} />
  </MultiSocketSwitch.Container>
);
```

```tsx
import MultiSocketSwitch from '@ray-js/multi-socket-switch';
export default () => (
  <MultiSocketSwitch
    style={{ width: 200 }}
    switchList={[
      { dpCode: 'swith_1', dpValue: true },
      { dpCode: 'swith_2', dpValue: true },
      { dpCode: 'swith_3', dpValue: false },
    ]}
    usbData={[
      { dpCode: 'usb_1', dpValue: true },
      { dpCode: 'usb_2', dpValue: false },
    ]}
    deviceId="123456"
  />
);
```
npm package: @ray-js/music-bar
Description: 音乐播放组件
Latest version: 0.0.2

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

# @ray-js/music-bar

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

> 音乐播放组件

## Installation

```sh
$ npm install @ray-js/music-bar
# or
$ yarn add @ray-js/music-bar
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import MusicBar from '@ray-js/music-bar';
export default () => <MusicBar />;
```
npm package: @ray-js/notice-bar
Description: 展示一组消息通知
Latest version: 0.0.5

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

# @ray-js/notice-bar

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

> 展示一组消息通知

## Installation

```sh
$ npm install @ray-js/notice-bar
# or
$ yarn add @ray-js/notice-bar
```

## Usage

```tsx
import Foo from '@ray-js/notice-bar';
export default () => <Foo />;
```
npm package: @ray-js/outdoor-gps-signal
Description: 出行GPS信号组件
Latest version: 1.0.0

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

# @ray-js/outdoor-gps-signal

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

> Components of GPS signal

## Installation

```sh
$ npm install @ray-js/outdoor-gps-signal
# or
$ yarn add @ray-js/outdoor-gps-signal
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import React from 'react';
import OutdoorGpsSignal from '@ray-js/outdoor-gps-signal';

export default function Home() {
  return (
    <>
      {/* light mode */}
      <View>
        <OutdoorGpsSignal gpsValue={10} min={0} max={100} />
        <OutdoorGpsSignal gpsValue={30} min={0} max={100} />
        <OutdoorGpsSignal gpsValue={50} min={0} max={100} />
        <OutdoorGpsSignal gpsValue={70} min={0} max={100} />
        <OutdoorGpsSignal gpsValue={100} min={0} max={100} />
      </View>
      {/* Dark Mode */}
      <View>
        <OutdoorGpsSignal gpsValue={10} theme="dark" min={0} max={100} />
        <OutdoorGpsSignal gpsValue={30} theme="dark" min={0} max={100} />
        <OutdoorGpsSignal gpsValue={50} theme="dark" min={0} max={100} />
        <OutdoorGpsSignal gpsValue={70} theme="dark" min={0} max={100} />
        <OutdoorGpsSignal gpsValue={100} theme="dark" min={0} max={100} />
      </View>
      {/* Custom width and height */}
      <View>
        <OutdoorGpsSignal
          gpsValue={50}
          min={0}
          max={100}
          style={{ width: '15px', height: '15px' }}
        />
        <OutdoorGpsSignal
          gpsValue={50}
          min={0}
          max={100}
          style={{ width: '30px', height: '30px' }}
        />
      </View>
    </>
  );
}
```
npm package: @ray-js/outdoor-wifi-signal
Description: 出行wifi信号组件
Latest version: 1.0.0

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

# @ray-js/outdoor-wifi-signal

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

> Components of 4G and Wifi signal

## Installation

```sh
$ npm install @ray-js/outdoor-wifi-signal
# or
$ yarn add @ray-js/outdoor-wifi-signal
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import OutdoorWifiSignal from '@ray-js/outdoor-wifi-signal';

export default function Home() {
  return (
    <>
      {/* signal is string, light mode */}
      <View>
        <OutdoorWifiSignal signal="cut" />
        <OutdoorWifiSignal signal="bad" />
        <OutdoorWifiSignal signal="general" />
        <OutdoorWifiSignal signal="good" />
        <OutdoorWifiSignal signal="great" />
      </View>

      {/* signal is number, dark mode */}
      <View>
        <OutdoorWifiSignal signal={0} min={0} max={100} theme="dark" />
        <OutdoorWifiSignal signal={30} min={0} max={100} theme="dark" />
        <OutdoorWifiSignal signal={50} min={0} max={100} theme="dark" />
        <OutdoorWifiSignal signal={70} min={0} max={100} theme="dark" />
        <OutdoorWifiSignal signal={90} min={0} max={100} theme="dark" />
      </View>

      {/* Custom width and height */}
      <View>
        <OutdoorWifiSignal signal="good" style={{ width: '30px', height: '30px' }} />
        <OutdoorWifiSignal signal="good" style={{ width: '20px', height: '20px' }} />
      </View>
    </>
  );
}
```
npm package: @ray-js/panel-base-sdk
Description: Tuya Mini App Panel Base SDK
Latest version: 1.1.4

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

# @ray-js/panel-base-sdk

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

> Ray Panel Mini App Base JS SDK

## Installation

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

## Usage

### Fully use

```javascript
import { kit, hooks, utils, service } from '@ray-js/panel-base-sdk';

const { I18N } = kit;

// Never use hooks.useDpState, which will cause the eslint rule to fail to detect
const { useDpState } = hooks;

const data = utils.parseJSON('{}');

service.getAssetHostname().then(data => {
  console.lo('data: ', data);
});
```

### Use on demand

```javascript
import { useDpState, useNetwork } from '@ray-js/panel-base-sdk/lib/hooks';
import { parseJSON } from '@ray-js/panel-base-sdk/lib/utils';
import { getAssetHostname } from '@ray-js/panel-base-sdk/lib/service';
import { I18N } from '@ray-js/panel-base-sdk/lib/kit';
```
npm package: @ray-js/panel-cloud
Description: Tuya Mini App Panel Cloud SDK
Latest version: 1.4.4

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

# @ray-js/panel-cloud

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

> 云能力（panel-service）指的是一系列可能在你开发控制设备面板业务的时候需要用到的云端服务，我们在 @ray-js/panel-cloud 中做了一层包装，帮助您更方便的开发智能产品。

## Installation

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

## Usage

```javascript
import { getDevAlarmList, setAlarmSwitch, getAssetHostname } from '@ray-js/panel-cloud';

getAssetHostname().then(data => {
  console.lo('data: ', data);
});
```
npm package: @ray-js/panel-service
Description: panel-service is a general cloud interface collection library
Latest version: 0.5.2

# @ray-js/panel-service

云能力（panel-service）指的是一系列可能在你开发控制设备面板业务的时候需要用到的云端服务，我们在 @ray-js/panel-service 中做了一层包装，帮助您更方便的开发智能产品。

## Quick Start

```shell
$ yarn add @ray-js/panel-service

or

$ npm install @ray-js/panel-service
```

then

```typescript
import * as services from '@ray-js/panel-service'

services.common.core.getAssetHostname().then((data) => {
  console.log('data: ', data)
})
```

详细文档见 [云能力 - 智能小程序](https://developer.tuya.com/cn/miniapp/panel/api)
npm package: @ray-js/presskey
Description: 单键
Latest version: 1.1.0

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

# @ray-js/presskey

> PressKey

## Installation

```sh
$ npm install @ray-js/presskey
# or
$ yarn add @ray-js/presskey
```

## Usage

```tsx
import PressKey from '@ray-js/presskey';

<PressKey text="Text" status />

<PressKey
  text="Text"
  status
  tip="tips"
  tipStyle={{ marginTop: '0rpx' }}
/>

```
npm package: @ray-js/random-password
Description: 门锁随机密码
Latest version: 0.0.3

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

# @ray/random-password

> Random Password

## Installation

```sh
$ npm install @ray/random-password
# or
$ yarn add @ray/random-password
```

## Usage

```tsx
import React from 'react';
import { View } from '@ray-js/components';
import RandomPassword from '@ray/random-password';
import './index.less';

const prefix = 'demo';

const RandomPasswordView = () => {
  return (
    <View className={`${prefix}-container`}>
      <RandomPassword
        className={`${prefix}-margin`}
        password="234567"
        getPassword={psw => console.log(`psw`, psw)}
      />
      <RandomPassword
        randomText="随机"
        digitalBase={6}
        randomTextColor="#FF4800"
        getPassword={psw => console.log(`psw`, psw)}
      />
    </View>
  );
};
export default RandomPasswordView;
```

## Quick Start

```sh
yarn build    # Compile

yarn watch    # Real-time compilation

yarn start:tuya      # Start the Tuya mini
```
npm package: @ray-js/ray-ipc-collect-edit
Description: 收藏点带编辑
Latest version: 0.0.1

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

# @ray-js/ray-ipc-collect-edit

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

> 收藏点带编辑

## Installation

```sh
$ npm install @ray-js/ray-ipc-collect-edit
# or
$ yarn add @ray-js/ray-ipc-collect-edit
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import Foo from '@ray-js/ray-ipc-collect-edit';
export default () => {
  return (
    <View className={styles.view}>
      <DemoBlock title={Strings.getLang('basicUsage')}>
        <CollectEdit
          datas={datas}
          errView="error"
          editBtn="edit"
          deleteBtn="delete"
          onEditBtn={onEditBtn}
          onDeleteBtn={onDeleteBtn}
          // addView={<View>111</View>}
          onAddBtn={onAddBtn}
        />
      </DemoBlock>
    </View>
  );
};
```
npm package: @ray-js/ray-ipc-collect-img
Description: ipc收藏图片，描述
Latest version: 0.0.1

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

# @ray-js/ray-ipc-collect-img

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

> ipc 收藏图片，描述

## Installation

```sh
$ npm install @ray-js/ray-ipc-collect-img
# or
$ yarn add @ray-js/ray-ipc-collect-img
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import CollectImg, { IPropData } from '@ray-js/ray-ipc-collect-img';
export default () => (

  const [datas, setDatas] = useState<IPropData[]>([]);

  useEffect(() => {
    const d = new Array(2).fill(0).map((item, index) => {
      return {
        deviceId: '',
        encryptKey: '',
        fileName: '',
        title: `t${index}`,
        src: '', // 加密图片的url
        id: `${index}`,
      };
    });
    setDatas(d);
  }, []);

  return (
    <CollectImg
      datas={datas}
      addIcon={require('../res/userGuide.png')}
      addBoxStyle={{}}
      titleStyle={{ color: 'red' }}
      addIconStyle={{ width: '40rpx', height: '40rpx' }}
      addTextStyle={{ fontSize: '24rpx', color: 'blue' }}
      addText="收藏"
      errIcon={require('../res/img_empty.png')}
      errText="error"
      errIconStyle={{ width: '80rpx', height: '80rpx' }}
      onAddCollect={onAddCollect}
    />
  )
);
```
npm package: @ray-js/ray-ipc-decrypt-image
Description: Ipc解密图片
Latest version: 0.0.5

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

# @ray-js/ray-ipc-decrypt-image

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

> Ipc 解密图片

## Installation

```sh
$ npm install @ray-js/ray-ipc-decrypt-image
# or
$ yarn add @ray-js/ray-ipc-decrypt-image
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Basic Usage

```tsx
import DecryptImage from '@ray-js/ray-ipc-decrypt-image';
export default () => <DecryptImage deviceId="" encryptKey="" fileName="" />;
```

## Batch loading images

```jsx
import React, { useEffect } from 'react'
import { Image, View } from '@ray-js/ray';
import { useBatchLoadImage } from '@ray-js/ray-ipc-decrypt-image'

const mockData = [
  {
    id: 1,
    url: 'url1'
  },
  {
    id: 2,
    url: 'url2'
  }
]
const deviceId = 'you deviceId' // If not, you can set a constant light
const encryptKey = 'your key'

export default function Page() {
  const loadInstance = useBatchLoadImage({
    shouldBatch: true, // Enable batch loading, default is true
    maxConcurrencyLoadImage: 2, // The maximum number of concurrent tasks when decrypting images, in order to reduce the pressure on the App side, default is 10
    defaultBatchTime: 300, // Every 300ms, the successfully decrypted URLs will be updated uniformly to reduce the number of setData calls on the mini program side. default is 400ms
  });

  useEffect(() => {
    mockData.forEach(item => {
      const url = item.url;
      const fileName = url;
      loadInstance.addOriginData({
        fileUrl: url,
        decryptKey: encryptKey,
        deviceId,
        fileName,
      });
    });
    loadInstance.loadAllOriginData();
  }, []);

  return (
    <View>
      {
        {mockData.map(item => {
            const url = loadInstance.getImageData(item.url)?.imageUrl;
            return <Image key={item.id} src={url} style={{ width: '100px', height: '100px' }} />;
          })}
      }
    </View>
  )

}

```
npm package: @ray-js/ray-ipc-half-horizontal-drag
Description: 水平方向可拖动，显示出下一个组件的小部分内容
Latest version: 0.0.6

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

# @ray-js/ray-ipc-half-horizontal-drag

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

> 水平方向可拖动，显示出下一个组件的小部分内容

## Installation

```sh
$ npm install @ray-js/ray-ipc-half-horizontal-drag
# or
$ yarn add @ray-js/ray-ipc-half-horizontal-drag
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import HalfHorizontalDrag from '@ray-js/ray-ipc-half-horizontal-drag';
export default () => (
  <HalfHorizontalDrag
    style={{ height: '110rpx', paddingLeft: '16rpx' }}
    datas={datas}
    onBgClick={data => {
      console.log('res===on 1', data);
    }}
    onRightClick={data => {
      console.log('res===on 2', data);
    }}
  />
);
```
npm package: @ray-js/ray-ipc-utils
Description: IPC 工具库
Latest version: 1.1.14

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

# @ray-js/ray-ipc-utils

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

> IPC utility library

## Installation

```sh
$ npm install @ray-js/ray-ipc-utils
// or
$ yarn add @ray-js/ray-ipc-utils
```

## Example

```tsx
import { goToIpcPageNativeRoute } from '@ray-js/ray-ipc-utils';

const id = 'ipc_album_panel';
const deviceId = '1234567890xxxxxx';

const result = await goToIpcPageNativeRoute(id, deviceId);
```

## Documentation

See [API Reference](https://developer.tuya.com/en/miniapp/solution-panel/ability/special/ipc/toolkit/general) for more information.
npm package: @ray-js/ray-lock-utils
Description: 门锁工具库。主要封装了门锁通用的hooks、utils、service等
Latest version: 0.0.1-beta-1

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

# @ray-js/ray-lock-utils

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

> 门锁工具库。主要封装了门锁通用的hooks、utils、service等

## Installation

```sh
$ npm install @ray-js/ray-lock-utils
# or
$ yarn add @ray-js/ray-lock-utils
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import Foo from '@ray-js/ray-lock-utils';
export default () => <Foo />;
```
npm package: @ray-js/ray-panel-i18n
Description: Tuya I18N
Latest version: 0.5.2
Deprecated: Deprecated, please use @ray-js/panel-sdk instead.

# @ray-js/ray-panel-i18n

## <font color='red'>已废弃</font>

**该包已不在维护，请使用 @ray-js/panel-sdk 中的功能替代。**
npm package: @ray-js/ray-panel-theme
Description: @ray-js/ray-panel-theme
Latest version: 0.5.2
Deprecated: Deprecated

# @ray-js/ray-panel-theme

## <font color='red'>已废弃</font>

**该包已不在维护**

## Usage

```jsx
import { Theme, defaultTheme, getDefaultTheme, CoreTheme, useTheme } from 'tuya-panel-theme'
```
npm package: @ray-js/ray-panel-utils
Description: Tuya tool collection kit
Latest version: 0.5.2
Deprecated: Deprecated, please use @ray-js/panel-sdk instead.

# @ray-js/ray-panel-utils

## <font color='red'>已废弃</font>

**该包已不在维护，请使用 @ray-js/panel-sdk 中的功能替代。**
npm package: @ray-js/ray-panel-wrapper
Description: Ray basic components
Latest version: 0.5.2
Deprecated: Deprecated, please use @ray-js/panel-sdk instead.

# @ray-js/ray-panel-wrapper

## <font color='red'>已废弃</font>

**该包已不在维护，请使用 @ray-js/panel-sdk 中的功能替代。**