open-index/open-npm huggingface dataset:
npm package: @ray-js/recording-amplitude-animation
Description: Audio amplitude animation
Latest version: 0.0.2

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

# @ray-js/recording-amplitude-animation

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

> Audio amplitude animation

## Installation

```sh
$ npm install @ray-js/recording-amplitude-animation
# or
$ yarn add @ray-js/recording-amplitude-animation
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Usage

When using, reference the animation instance `AnimateActionInstance`, call `AnimateActionInstance.update` to continuously update the animation

> Parameters

- `animateId` must be consistent with the component parameter `animateId`
- `percent` is of Number type, ranging from 0-1

```tsx
import { AnimateActionInstance } from '@ray-js/recording-amplitude-animation';
AnimateActionInstance.update({ percent, animateId });
```

The complete usage is as follows
Note: Only one RayRecordingAmplitudeAnimation can be used on the same page

```tsx
import React, { useEffect, useRef, useState } from 'react';
import RayRecordingAmplitudeAnimation, {
  AnimateActionInstance,
} from '@ray-js/recording-amplitude-animation';
import { View } from '@ray-js/ray';

export default () => {
  const MY_ANIM_ID = 'anim1';
  const intervalRef = useRef(null);
  const [play, setPlay] = useState(true);

  const handleClick = useCallback(() => {
    setPlay(!play);
  }, [play]);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      // Simulate audio amplitude percentage data input, percent range 0-1
      AnimateActionInstance.update({ percent: Math.random(), animateId: MY_ANIM_ID });
    }, 100);
  }, []);

  return (
    <View>
      <Button onClick={handleClick}>{play ? 'Stop' : 'Play'}</Button>
      <RayRecordingAmplitudeAnimation
        width={300}
        height={200}
        animateId={MY_ANIM_ID}
        speed={2}
        barWidth={3}
        barColor="#00f"
        play={play}
      />
    </View>
  );
};
```
npm package: @ray-js/research-bar
Description: 搜索栏，包含扫码功能
Latest version: 0.0.1

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

# @ray-js/research-bar

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

> Search bar, including code scanning function

## Installation

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

## Develop

```sh
# watch compile component code
yarn watch
# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import Foo from '@ray-js/research-bar';

export default function Foo() {
  return (
    <View className={styles.view}>
      <DemoBlock title="basic" />
      <View className={styles.line}>
        <Template placeholder="Enter search keywords" />
      </View>

      <View className={styles.line}>
        <Template placeholder="Enter search keywords" round />
      </View>

      <DemoBlock title="dark" />
      <View className={styles.line}>
        <Template placeholder="Enter search keywords" themeType="dark" />
      </View>

      <View className={styles.line}>
        <Template placeholder="Enter search keywords" round themeType="dark" />
      </View>

      <DemoBlock title="Scan code" />
      <View className={styles.line}>
        <Template showScan />
      </View>
    </View>
  );
}
```