Tuya Component Library

https://tuya-docs.vercel.app/
Admin
Tuya Component Library is a complete reference for Tuya miniapp development components, providing a...
Tokens:8,999
Snippets:34
Trust Score:7.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### React Input Component Usage

Source: https://tuya-docs.vercel.app/component/input

This React code snippet demonstrates how to use the Input component from '@ray-js/ray'. It shows basic setup for handling user input, setting a placeholder, and responding to input events. Ensure the '@ray-js/ray' library is installed and imported.

```javascript
import { Input } from '@ray-js/ray';

<Input 
  value={inputValue} 
  placeholder="请输入内容" 
  onInput={handleInput}
/>
```

--------------------------------

### Picker Component Examples - JavaScript

Source: https://tuya-docs.vercel.app/component/picker

Demonstrates the usage of the Picker component for selecting options and time. It utilizes the '@ray-js/ray' library. Ensure the 'Picker' component is imported before use. The component accepts various props to configure its behavior and appearance.

```javascript
import { Picker } from '@ray-js/ray';

<Picker 
  mode="selector"
  range={['选项1', '选项2', '选项3']}
  onChange={handlePickerChange}
>
  <View>点击选择</View>
</Picker>

<Picker 
  mode="time"
  value={selectedTime}
  onChange={handleTimeChange}
>
  <View>选择时间</View>
</Picker>
```

--------------------------------

### React Switch Component Usage

Source: https://tuya-docs.vercel.app/component/switch

Demonstrates how to use the Switch component from '@ray-js/ray'. It shows basic usage with a checked state and change handler, and an example using the 'checkbox' type with custom styling.

```javascript
import { Switch } from '@ray-js/ray';

<Switch 
  checked={isChecked}
  onChange={handleSwitchChange}
/>

<Switch 
  type="checkbox"
  checked={isChecked}
  className="text-orange-500"
/>
```

--------------------------------

### Display Image with Tuya's Image Component (React)

Source: https://tuya-docs.vercel.app/component/image

Demonstrates how to use the Image component from '@ray-js/ray' to display an image. It showcases basic properties like 'src' and 'mode', and event handling with 'onLoad'. Ensure the '@ray-js/ray' library is installed.

```jsx
import { Image } from '@ray-js/ray';

<Image 
  src="https://example.com/image.jpg"
  mode="scaleToFill"
  onLoad={handleImageLoad}
/>
```

--------------------------------

### View Component Usage Example - React Native

Source: https://tuya-docs.vercel.app/component/view

Demonstrates how to use the View component for basic layout and styling, including applying class names for background colors and text, and utilizing hover effects. This component is part of the '@ray-js/ray' library.

```javascript
import { View } from '@ray-js/ray';

<View className="p-5 bg-gray-100">
  <Text>这是一个视图容器</Text>
</View>

<View hoverClassName="hover-class">
  <Text>带悬停效果的视图</Text>
</View>
```

--------------------------------

### Form Component Usage with Input and Button - React (Ray.js)

Source: https://tuya-docs.vercel.app/component/form

Example demonstrating the basic usage of the Form component from '@ray-js/ray'. It includes Input fields for name and email, and a Submit button. The form is configured to call a handleSubmit function upon submission. Dependencies include Form, Input, and Button from '@ray-js/ray'.

```javascript
import { Form, Input, Button } from '@ray-js/ray';

<Form onSubmit={handleSubmit}>
  <Input name="name" placeholder="请输入姓名" />
  <Input name="email" placeholder="请输入邮箱" />
  <Button formType="submit">提交</Button>
</Form>
```

--------------------------------

### Display Progress with Tuya React Component

Source: https://tuya-docs.vercel.app/component/progress

This snippet demonstrates how to use the `Progress` component from '@ray-js/ray' to display a progress bar. The `percent` prop controls the progress value, ranging from 0 to 100. Ensure the '@ray-js/ray' library is installed and imported correctly.

```javascript
import { Progress } from '@ray-js/ray';

<Progress percent={30} />
```

--------------------------------

### Basic ScrollView Example (React)

Source: https://tuya-docs.vercel.app/component/scrollview

This example demonstrates how to use the ScrollView component for horizontal scrolling. It imports ScrollView from '@ray-js/ray' and includes basic styling for inline block elements to achieve horizontal layout. Note that ScrollView cannot be set to flex display.

```javascript
import { ScrollView } from '@ray-js/ray';
import { View } from '@ray-js/ray';

<ScrollView 
  scrollX={true}
  refresherEnabled={true}
  className="whitespace-nowrap w-[300px]"
>
  <View className="inline-block w-[100px]">内容1</View>
  <View className="inline-block w-[100px]">内容2</View>
</ScrollView>
```

--------------------------------

### WebView Component Usage in React (Tuya MiniApp)

Source: https://tuya-docs.vercel.app/component/webview

This snippet demonstrates how to use the WebView component from the '@ray-js/ray' library. It shows how to set the source URL and attach event handlers for message, load, and error events. Ensure the 'src' domain is configured in the Tuya MiniApp developer platform.

```javascript
import { WebView } from '@ray-js/ray';

<WebView 
  src="https://www.example.com"
  onLoad={handleWebViewLoad}
  onError={handleWebViewError}
/>

<WebView 
  src="https://interactive-page.com"
  onMessage={handleMessage}
/>
```

--------------------------------

### Input Component API

Source: https://tuya-docs.vercel.app/component/input

This section describes the properties and events for the Input component.

```APIDOC
## Input Component

### Description
Provides an input field for user text entry.

### Properties
#### Attributes
- **className** (string) - Optional - Class name for styling.
- **value** (string) - Optional - The current content of the input field.
- **type** (string) - Optional - Type of input (e.g., `text`, `number`, `idcard`, `digit`). Defaults to `text`.
- **password** (boolean) - Optional - If true, hides input for password entry. Defaults to `false`.
- **placeholder** (string) - Optional - Placeholder text shown when the input is empty.
- **placeholderStyle** (object) - Optional - Style object for the placeholder text.
- **disabled** (boolean) - Optional - If true, disables the input field. Defaults to `false`.
- **maxLength** (number) - Optional - Maximum number of characters allowed.
- **confirmType** (string) - Optional - Text for the button in the bottom-right of the keyboard (only for `type='text'`). Defaults to `done`.
- **selectionStart** (number) - Optional - Starting position for text selection when focused. Defaults to `-1`.
- **selectionEnd** (number) - Optional - Ending position for text selection when focused. Defaults to `-1`.
- **cursor** (number) - Optional - Position of the cursor when focused. Defaults to `false`.

### Events
#### Event Handlers
- **onInput** - Triggered when the input value changes. Receives an event object.
- **onConfirm** - Triggered when the confirm button is pressed. Receives an event object.
- **onBlur** - Triggered when the input field loses focus. Receives an event object.
- **onFocus** - Triggered when the input field gains focus. Receives an event object.

### Request Example
```javascript
<Input 
  value={inputValue} 
  placeholder="请输入内容"
  onInput={handleInput}
/>
```

### Response
(No specific response defined for component properties or events, actions are handled by event callbacks.)
```

--------------------------------

### Implement Picker Component for Selections, Times, and Dates

Source: https://context7.com/context7/tuya-docs_vercel_app/llms.txt

The Picker component allows users to select from predefined options, times, or dates. It supports different modes like 'selector', 'time', and 'multiSelector'. Event handlers for 'onChange' and 'onCancel' are crucial for managing user selections.

```jsx
import { Picker, View } from '@ray-js/ray';
import { useState } from 'react';

function SelectionPickers() {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [selectedTime, setSelectedTime] = useState('12:00');

  const handlePickerChange = (event) => {
    const index = event.detail.value;
    setSelectedIndex(index);
    console.log('Selected index:', index);
  };

  const handleTimeChange = (event) => {
    const time = event.detail.value;
    setSelectedTime(time);
    console.log('Selected time:', time);
  };

  const handleCancel = () => {
    console.log('Selection cancelled');
  };

  return (
    <>
      {/* Selector picker */}
      <Picker
        mode="selector"
        range={['选项1', '选项2', '选项3']}
        value={selectedIndex}
        disabled={false}
        onChange={handlePickerChange}
        onCancel={handleCancel}
      >
        <View>点击选择</View>
      </Picker>

      {/* Time picker */}
      <Picker
        mode="time"
        value={selectedTime}
        start="00:00"
        end="23:59"
        onChange={handleTimeChange}
      >
        <View>选择时间: {selectedTime}</View>
      </Picker>

      {/* Multi-column picker with objects */}
      <Picker
        mode="multiSelector"
        range={[
          [{ id: 1, name: '北京' }, { id: 2, name: '上海' }],
          [{ id: 3, name: '朝阳区' }, { id: 4, name: '海淀区' }]
        ]}
        rangeKey="name"
        value={[0, 0]}
        onChange={(e) => console.log('Multi-select:', e.detail.value)}
        onColumnchange={(e) => console.log('Column changed:', e.detail)}
      >
        <View>选择城市和区域</View>
      </Picker>
    </>
  );
}

```

--------------------------------

### WebView Component

Source: https://tuya-docs.vercel.app/component/webview

The WebView component allows you to embed web pages directly into your application. It supports loading external URLs and handling communication events between the web page and the application.

```APIDOC
## WebView Component

### Description
The WebView component provides a way to display web content within the application's interface. It is configurable with a source URL and supports various event handlers for interactions.

### Method
N/A (Component)

### Endpoint
N/A (Component)

### Parameters
#### Props
- **src** (string) - Required - The URL of the web page to be displayed. The domain must be configured on the Tuya MiniApp developer platform.

#### Events
- **onLoad** (eventhandle) - Triggered when the web page finishes loading. The event detail includes the `src` of the loaded page.
- **onError** (eventhandle) - Triggered when the web page fails to load. The event detail includes the `url` and `fullUrl` of the failed request.
- **onMessage** (eventhandle) - Triggered when a message is posted from the web page to the mini-program, typically during app backtrack, component destruction, or sharing. The event detail contains `{ data }`.

### Request Example
```javascript
<WebView 
  src="https://www.example.com"
  onLoad={handleWebViewLoad}
  onError={handleWebViewError}
/>

<WebView 
  src="https://interactive-page.com"
  onMessage={handleMessage}
/>
```

### Response
#### Event Data Examples
- **onLoad**: `{ src: 'https://www.example.com' }`
- **onError**: `{ url: '...', fullUrl: '...' }`
- **onMessage**: `{ data: '...' }`
```

--------------------------------

### React Canvas Component Initialization and Usage

Source: https://tuya-docs.vercel.app/component/canvas

Demonstrates how to import and use the Canvas component from '@ray-js/ray'. This snippet shows the basic structure for rendering a canvas element with specific IDs and class names, and how to attach touch event handlers.

```javascript
import { Canvas, createCanvasContext } from '@ray-js/ray';

<Canvas 
  canvasId="myCanvas"
  className="w-[300px] h-[200px]"
  onTouchStart={handleTouchStart}
/>
```

--------------------------------

### Image Component

Source: https://tuya-docs.vercel.app/component/image

This section details the properties and events of the Image component.

```APIDOC
## Image Component

### Description

The Image component is used to display images within the application. It supports various modes for scaling and provides event handlers for load and error states.

### Usage

```javascript
import { Image } from '@ray-js/ray';

<Image 
  src="https://example.com/image.jpg"
  mode="scaleToFill"
  onLoad={handleImageLoad}
/>
```

### Properties

#### Properties Description

| Property        | Type   | Default     | Required | Description                      |
|-----------------|--------|-------------|----------|----------------------------------|
| `className`     | string |             | No       | Custom style class name.         |
| `src`           | string |             | Yes      | The URL of the image resource.   |
| `mode`          | string | `scaleToFill` | No       | Image scaling and cropping mode. |
| `fadeDuration`  | number |             | No       | Fade-in animation duration in ms.|

### Events

#### Event Description

| Event Name | Parameters                                   | Description                       |
|------------|----------------------------------------------|-----------------------------------|
| `onLoad`   | `(e: { width: number; height: number; origin }) => void` | Triggered when the image finishes loading. |
| `onError`  | `(e: { errMsg: string; origin }) => void`      | Triggered when an error occurs during image loading. |
```

--------------------------------

### View Container Component in Ray.js

Source: https://context7.com/context7/tuya-docs_vercel_app/llms.txt

Provides a basic layout container for structuring page content. Supports touch interactions, hover effects, and event handling. Used for creating flexible and interactive UI elements.

```jsx
import { View, Text } from '@ray-js/ray';

// Basic layout container
<View className="p-5 bg-gray-100">
  <Text>这是一个视图容器</Text>
</View>

// Container with hover effects and touch events
<View
  hoverClassName="hover-class"
  hoverStartTime={20}
  hoverStayTime={70}
  onClick={(event) => console.log('Clicked', event)}
  onTouchStart={(event) => console.log('Touch started')}
  onTouchEnd={(event) => console.log('Touch ended')}
  onTouchMove={(event) => console.log('Touch moving')}
>
  <Text>带悬停效果的视图</Text>
</View>
```

--------------------------------

### Slider Component API

Source: https://tuya-docs.vercel.app/component/slider

Documentation for the Slider component, detailing its properties and events.

```APIDOC
## Slider Component

### Description
A slider component that allows users to select a value within a specified range.

### Properties
#### Available Properties
- **min** (number) - Optional - The minimum value of the slider. Defaults to 0.
- **max** (number) - Optional - The maximum value of the slider. Defaults to 100.
- **step** (number) - Optional - The step increment for the slider. Must be greater than 0 and divisible by (max - min). Defaults to 1.
- **disabled** (boolean) - Optional - Whether the slider is disabled. Defaults to false.
- **value** (number) - Optional - The current value of the slider. Defaults to 0.
- **activeColor** (color) - Optional - The color of the selected portion of the slider. Defaults to '#007aff'.
- **backgroundColor** (color) - Optional - The color of the slider's background track. Defaults to 'rgba(0,0,0,.2)'.
- **blockSize** (number) - Optional - The size of the slider's handle (thumb). Must be between 12 and 28. Defaults to 28.
- **blockColor** (color) - Optional - The color of the slider's handle (thumb). Defaults to '#ffffff'.
- **showValue** (boolean) - Optional - Whether to display the current value next to the slider. Defaults to false.

### Events
#### Available Events
- **onChange** (eventhandle) - Triggered when the user finishes dragging the slider. Receives `event.value`.
- **onChanging** (eventhandle) - Triggered while the user is dragging the slider. Receives `event.value`.

### Request Example
```javascript
import { Slider } from '@ray-js/ray';

<Slider 
  value={sliderValue}
  onChange={handleSliderChange}
/>

<Slider 
  min={0}
  max={100}
  showValue={true}
  activeColor="#ff6600"
/>
```

### Response
#### Success Response (N/A for component properties)
This component does not have a direct success response in the traditional API sense. Event handlers receive data.

#### Response Example
```json
{
  "value": 50 
}
```
```

--------------------------------

### Button Component

Source: https://tuya-docs.vercel.app/component/button

This section describes the properties and events of the Button component.

```APIDOC
## Button Component

### Description
Provides a clickable button element with various styling and behavior options.

### Usage
```javascript
import { Button } from '@ray-js/ray';

<Button type="primary" onClick={handleClick}>
  Click Button
</Button>
```

### Properties
#### Available Properties
- **size** (keyof Size) - Optional - Button size.
- **type** (keyof Type) - Optional - Button style type.
- **plain** (boolean) - Optional - Whether the button is hollow with a transparent background.
- **disabled** (boolean) - Optional - Whether the button is disabled.
- **loading** (boolean) - Optional - Whether to display a loading icon before the name.
- **formType** (keyof FormType) - Optional - Used for form components to trigger submit/reset events.
- **openType** (OpenType) - Optional - WeChat open capabilities.
- **hoverClassName** (string) - Optional - Class name for the button when pressed. Set to 'none' for no click effect.
- **hoverStyle** (StyleProp ViewStyle) - Optional - Style for the button when pressed (RN specific).
- **hoverStopPropagation** (boolean) - Optional - Whether to stop propagation of the click state to ancestor nodes.
- **hoverStartTime** (number) - Optional - Time in milliseconds after pressing before the click state appears.
- **hoverStayTime** (number) - Optional - Time in milliseconds the click state persists after the finger is released.

### Events
#### Available Events
- **onClick** (event: MouseEvent) => void - Triggered when the button is clicked.
- **onTouchStart** (event: TouchEvent) => void - Triggered when a touch starts on the button.
- **onTouchEnd** (event: TouchEvent) => void - Triggered when a touch ends on the button.

### Example
#### Request Body (N/A for this component)

#### Success Response (N/A for this component)

#### Response Example (N/A for this component)
```

--------------------------------

### Radio Component Usage (JavaScript/JSX)

Source: https://tuya-docs.vercel.app/component/radio

This snippet demonstrates how to use the Radio component within a RadioGroup. It shows how to set the value, checked state, and handle change events. The Radio component requires the Radio and RadioGroup components from '@ray-js/ray'.

```jsx
import { Radio, RadioGroup } from '@ray-js/ray';

<Radio 
  value="option1"
  checked={selectedValue === 'option1'}
  onChange={handleRadioChange}
>
  选项1
</Radio>
```

--------------------------------

### Implement Slider Component with React - Tuya

Source: https://tuya-docs.vercel.app/component/slider

This snippet demonstrates how to implement and use the Slider component in a React application. It shows basic usage with value and change handlers, as well as advanced configuration with min, max, and color properties. The Slider component is part of the '@ray-js/ray' library.

```javascript
import { Slider } from '@ray-js/ray';

<Slider 
  value={sliderValue}
  onChange={handleSliderChange}
/>

<Slider 
  min={0}
  max={100}
  showValue={true}
  activeColor="#ff6600"
/>
```

--------------------------------

### Input Component in Ray.js

Source: https://context7.com/context7/tuya-docs_vercel_app/llms.txt

A text input field component supporting various input types, placeholder styling, and cursor control. It handles input events, focus, blur, and confirmation. Useful for user data entry.

```jsx
import { Input } from '@ray-js/ray';
import { useState } from 'react';

function MyComponent() {
  const [inputValue, setInputValue] = useState('');

  return (
    <>
      {/* Basic text input */}
      <Input
        value={inputValue}
        placeholder="请输入内容"
        placeholderStyle={{ color: '#999' }}
        maxLength={50}
        onInput={(event) => setInputValue(event.detail.value)}
        onFocus={(event) => console.log('Input focused')}
        onBlur={(event) => console.log('Input blurred')}
        onConfirm={(event) => console.log('Confirmed:', event.detail.value)}
      />

      {/* Password input with number type */}
      <Input
        type="number"
        password={true}
        disabled={false}
        confirmType="done"
        cursor={0}
        selectionStart={-1}
        selectionEnd={-1}
        className="border p-2"
        onInput={(event) => console.log('Input:', event.detail.value)}
      />
    </>
  );
}
```

--------------------------------

### Drawing with Canvas Component in React

Source: https://context7.com/context7/tuya-docs_vercel_app/llms.txt

This snippet demonstrates how to use the Canvas component to draw shapes and text. It initializes a 2D canvas context, draws a rectangle, a circle, and text, and then renders the drawing. It also includes event handlers for touch interactions and error handling. Dependencies include '@ray-js/ray' for the Canvas component and React's 'useEffect' hook.

```jsx
import { Canvas, createCanvasContext } from '@ray-js/ray';
import { useEffect } from 'react';

function DrawingCanvas() {
  useEffect(() => {
    const ctx = createCanvasContext('myCanvas');

    // Draw rectangle
    ctx.setFillStyle('#ff6600');
    ctx.fillRect(10, 10, 150, 100);

    // Draw circle
    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, 2 * Math.PI);
    ctx.setFillStyle('#007aff');
    ctx.fill();

    // Draw text
    ctx.setFontSize(20);
    ctx.fillText('Hello Canvas', 50, 150);

    ctx.draw();
  }, []);

  const handleTouchStart = (event) => {
    const { x, y } = event.detail;
    console.log('Touch started at:', x, y);
  };

  const handleTouchMove = (event) => {
    const { x, y } = event.detail;
    console.log('Touch moved to:', x, y);
    // Draw at touch position
  };

  const handleError = (event) => {
    console.error('Canvas error:', event.detail.errMsg);
  };

  return (
    <Canvas
      canvasId="myCanvas"
      type="2d"
      disableScroll={true}
      className="w-[300px] h-[200px] border"
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={(e) => console.log('Touch ended')}
      onTouchCancel={(e) => console.log('Touch cancelled')}
      onLongtap={(e) => console.log('Long tap detected')}
      onError={handleError}
    />
  );
}

```

--------------------------------

### Display Images with Scaling and Load Events

Source: https://context7.com/context7/tuya-docs_vercel_app/llms.txt

The Image component facilitates the display of images with various scaling modes ('scaleToFill', 'aspectFit', etc.) and supports loading and error event handling. The 'fadeDuration' property can be used for fade-in animations.

```jsx
import { Image } from '@ray-js/ray';

function ImageGallery() {
  const handleImageLoad = (event) => {
    const { width, height, origin } = event.detail;
    console.log(`Image loaded: ${width}x${height}px`, origin);
  };

  const handleImageError = (event) => {
    const { errMsg, origin } = event.detail;
    console.error('Image failed to load:', errMsg, origin);
  };

  return (
    <>
      {/* Basic image with scaling */}
      <Image
        src="https://example.com/device-photo.jpg"
        mode="scaleToFill"
        className="w-full h-[200px]"
        onLoad={handleImageLoad}
        onError={handleImageError}
      />

      {/* Image with fade-in animation */}
      <Image
        src="https://example.com/product.jpg"
        mode="aspectFit"
        fadeDuration={300}
        onLoad={handleImageLoad}
      />
    </>
  );
}

```

--------------------------------

### React Native Button Component Usage

Source: https://tuya-docs.vercel.app/component/button

Demonstrates how to import and use the Button component from '@ray-js/ray'. This snippet shows a basic button with a primary type and an onClick handler.

```javascript
import { Button } from '@ray-js/ray';

<Button type="primary" onClick={handleClick}>
  点击按钮
</Button>
```

--------------------------------

### Display Interactive Maps with Markers and Region Changes

Source: https://context7.com/context7/tuya-docs_vercel_app/llms.txt

The Map component renders an interactive map with support for markers and location-based features. Key properties include 'longitude', 'latitude', 'scale', and 'markers'. Event handlers for 'onMarkertap' and 'onRegionchange' enable interaction and tracking of map view changes.

```jsx
import { Map } from '@ray-js/ray';
import { useState } from 'react';

function DeviceMap() {
  const [markers, setMarkers] = useState([
    { id: 1, latitude: 39.90923, longitude: 116.397428, title: 'Device 1' },
    { id: 2, latitude: 39.91023, longitude: 116.398428, title: 'Device 2' }
  ]);

  const handleMarkerTap = (event) => {
    const markerId = event.detail.markerId;
    console.log('Marker tapped:', markerId);
    // Find and interact with the specific marker
  };

  const handleRegionChange = (event) => {
    console.log('Map region changed:', event.detail);
  };

  return (
    <Map
      longitude={116.397428}
      latitude={39.90923}
      scale={16}
      minScale={4}
      maxScale={19}
      markers={markers}
      showLocation={true}
      className="w-full h-[400px]"
      onMarkertap={handleMarkerTap}
      onRegionchange={handleRegionChange}
    />
  );
}

```

--------------------------------

### Switch Component for Toggling States with @ray-js/ray

Source: https://context7.com/context7/tuya-docs_vercel_app/llms.txt

A React toggle switch component from @ray-js/ray. It supports a standard switch and a checkbox-style variant for binary on/off states. Includes options for checked state, disabled status, and color customization. Dependencies: React, @ray-js/ray.

```jsx
import { Switch } from '@ray-js/ray';
import { useState } from 'react';

function DeviceControls() {
  const [deviceOn, setDeviceOn] = useState(false);

  const handleSwitchChange = (event) => {
    const value = event.detail.value;
    setDeviceOn(value);
    console.log('Device is now:', value ? 'ON' : 'OFF');
  };

  return (
    <>
      {/* Toggle switch */}
      <Switch
        checked={deviceOn}
        disabled={false}
        color="#007AFF"
        type="switch"
        onChange={handleSwitchChange}
      />

      {/* Checkbox-style switch */}
      <Switch
        type="checkbox"
        checked={deviceOn}
        color="#ff6600"
        className="text-orange-500"
        onChange={handleSwitchChange}
      />
    </>
  );
}

```

--------------------------------

### Button Component in Ray.js

Source: https://context7.com/context7/tuya-docs_vercel_app/llms.txt

An interactive button component offering various styles, loading states, and form integration. It supports click and touch events, hover effects, and can be used for form submissions.

```jsx
import { Button } from '@ray-js/ray';

// Primary button with click handler
<Button
  type="primary"
  size="default"
  onClick={(event) => console.log('Button clicked', event)}
  onTouchStart={(event) => console.log('Touch start')}
  onTouchEnd={(event) => console.log('Touch end')}
>
  点击按钮
</Button>

// Loading button with custom hover effects
<Button
  type="default"
  plain={false}
  disabled={false}
  loading={true}
  hoverClassName="custom-hover"
  hoverStartTime={20}
  hoverStayTime={70}
  hoverStopPropagation={false}
>
  处理中...
</Button>

// Form submit button
<Button
  formType="submit"
  type="primary"
>
  提交表单
</Button>
```

--------------------------------

### Embed Video Player with Playback Controls and Events

Source: https://context7.com/context7/tuya-docs_vercel_app/llms.txt

The Video component provides a video player with essential playback controls, including play, pause, and end events. Error handling is also supported. Attributes like 'autoplay', 'loop', and 'poster' allow for customized video playback experiences.

```jsx
import { Video } from '@ray-js/ray';

function VideoPlayer() {
  const handlePlay = (event) => {
    console.log('Video started playing');
  };

  const handlePause = (event) => {
    console.log('Video paused');
  };

  const handleEnded = (event) => {
    console.log('Video finished playing');
  };

  const handleError = (event) => {
    console.error('Video error:', event.detail);
  };

  return (
    <>
      {/* Video with controls */}
      <Video
        src="https://example.com/tutorial.mp4"
        controls={true}
        duration={120}
        onPlay={handlePlay}
        onPause={handlePause}
        onEnded={handleEnded}
        onError={handleError}
      />

      {/* Autoplay video with poster */}
      <Video
        src="https://example.com/demo.mp4"
        poster="https://example.com/thumbnail.jpg"
        controls={true}
        autoplay={true}
        loop={false}
      />
    </>
  );
}

```

--------------------------------

### Slider Component for Numeric Input with @ray-js/ray

Source: https://context7.com/context7/tuya-docs_vercel_app/llms.txt

A React slider component from @ray-js/ray for selecting numeric values within a range. Supports basic sliders and temperature-specific sliders, with options for min, max, step, and visual feedback. Dependencies: React, @ray-js/ray.

```jsx
import { Slider } from '@ray-js/ray';
import { useState } from 'react';

function BrightnessControl() {
  const [brightness, setBrightness] = useState(50);

  const handleChange = (event) => {
    const value = event.detail.value;
    setBrightness(value);
    console.log('Final brightness:', value);
  };

  const handleChanging = (event) => {
    console.log('Adjusting brightness:', event.detail.value);
  };

  return (
    <>
      {/* Basic slider */}
      <Slider
        value={brightness}
        min={0}
        max={100}
        step={1}
        showValue={true}
        disabled={false}
        activeColor="#ff6600"
        backgroundColor="rgba(0,0,0,.2)"
        blockSize={28}
        blockColor="#ffffff"
        onChange={handleChange}
        onChanging={handleChanging}
      />

      {/* Temperature slider */}
      <Slider
        min={16}
        max={30}
        step={1}
        showValue={true}
        activeColor="#007aff"
        onChange={(e) => console.log('Temperature set to:', e.detail.value)}
      />
    </>
  );
}

```

--------------------------------

### Form Component for Data Collection with @ray-js/ray

Source: https://context7.com/context7/tuya-docs_vercel_app/llms.txt

A React form component using @ray-js/ray's Form, Input, and Button. It collects and submits data from child input components. Handles submission and reset events. Dependencies include React and @ray-js/ray.

```jsx
import { Form, Input, Button } from '@ray-js/ray';
import { useState } from 'react';

function RegistrationForm() {
  const handleSubmit = (event) => {
    const formData = event.detail.value;
    console.log('Form submitted:', formData);
    // formData = { name: "张三", email: "zhang@example.com" }
  };

  const handleReset = (event) => {
    console.log('Form reset');
  };

  return (
    <Form
      reportSubmit={true}
      onSubmit={handleSubmit}
      onReset={handleReset}
    >
      <Input name="name" placeholder="请输入姓名" />
      <Input name="email" placeholder="请输入邮箱" />
      <Button formType="submit">提交</Button>
      <Button formType="reset">重置</Button>
    </Form>
  );
}

```

--------------------------------

### Checkbox and CheckboxGroup Component Usage (React Native)

Source: https://tuya-docs.vercel.app/component/checkbox

Demonstrates how to import and use the Checkbox and CheckboxGroup components for creating selectable options. It shows basic usage with individual checkboxes and within a group, handling selection changes.

```javascript
import { Checkbox, CheckboxGroup } from '@ray-js/ray';

<Checkbox 
  value="option1"
  checked={isChecked}
  onChange={handleCheckboxChange}
>
  选项1
</Checkbox>

<CheckboxGroup onChange={handleGroupChange}>
  <Checkbox value="apple">苹果</Checkbox>
  <Checkbox value="banana">香蕉</Checkbox>
</CheckboxGroup>
```

--------------------------------

### Checkbox Component for Multi-select with @ray-js/ray

Source: https://context7.com/context7/tuya-docs_vercel_app/llms.txt

A React component for handling single and group checkbox selections using @ray-js/ray. It manages individual checkbox states and collects values from checkbox groups. Dependencies include React and @ray-js/ray.

```jsx
import { Checkbox, CheckboxGroup } from '@ray-js/ray';
import { useState } from 'react';

function SelectionComponent() {
  const [checked, setChecked] = useState(false);
  const [selectedValues, setSelectedValues] = useState([]);

  const handleCheckboxChange = (event) => {
    const { value, checked } = event.detail;
    setChecked(checked);
    console.log(`Checkbox ${value} is now ${checked ? 'checked' : 'unchecked'}`);
  };

  const handleGroupChange = (event) => {
    const values = event.detail.value;
    setSelectedValues(values);
    console.log('Selected items:', values);
    // values = ["apple", "banana"]
  };

  return (
    <>
      {/* Single checkbox */}
      <Checkbox
        value="option1"
        checked={checked}
        disabled={false}
        color="#007AFF"
        onChange={handleCheckboxChange}
      >
        选项1
      </Checkbox>

      {/* Checkbox group */}
      <CheckboxGroup onChange={handleGroupChange}>
        <Checkbox value="apple">苹果</Checkbox>
        <Checkbox value="banana">香蕉</Checkbox>
        <Checkbox value="orange">橙子</Checkbox>
      </CheckboxGroup>
    </>
  );
}

```

--------------------------------

### Canvas Component

Source: https://tuya-docs.vercel.app/component/canvas

The Canvas component allows for drawing graphics and handling touch interactions. It supports a '2d' type and requires a unique identifier.

```APIDOC
## Canvas Component

### Description
The Canvas component allows for drawing graphics and handling touch interactions. It supports a '2d' type and requires a unique identifier.

### Properties
#### Properties Description
- **type** (string) - Optional - Specifies the canvas type, with '2d' being the only valid value.
- **canvasId** (string) - Required - The unique identifier for the canvas component. This is required if 'type' is specified.
- **id** (string) - Optional - A unique identifier for the component itself.
- **disableScroll** (boolean) - Optional - Defaults to `false`. Prevents screen scrolling and pull-to-refresh when moving on the canvas and a gesture event is bound.

### Events
#### Event Description
- **onTouchStart** - Handles the start of a touch gesture.
- **onTouchMove** - Handles movement after a touch gesture begins.
- **onTouchEnd** - Handles the end of a touch gesture.
- **onTouchCancel** - Handles interruption of a touch gesture (e.g., by a call or dialog).
- **onLongtap** - Triggers after a 500ms long press. Moving the finger after triggering will not cause screen scrolling.
- **onError** - Triggers when an error occurs. `detail` will contain an `errMsg` object.

### Request Example
```javascript
import { Canvas, createCanvasContext } from '@ray-js/ray';

<Canvas 
  canvasId="myCanvas"
  className="w-[300px] h-[200px]"
  onTouchStart={handleTouchStart}
/>
```
```

--------------------------------

### ScrollView Component in Ray.js

Source: https://context7.com/context7/tuya-docs_vercel_app/llms.txt

A scrollable container component that supports horizontal and vertical scrolling. It includes features like pull-to-refresh, scroll position control, and scroll event handling. Useful for displaying large amounts of content.

```jsx
import { ScrollView, View } from '@ray-js/ray';

// Horizontal scrolling container
<ScrollView
  scrollX={true}
  refresherEnabled={true}
  refresherThreshold={45}
  refresherBackground="#FFF"
  refresherTriggered={false}
  hideScrollbar={true}
  upperThreshold={50}
  lowerThreshold={50}
  className="whitespace-nowrap w-[300px]"
  onScrollToUpper={(event) => console.log('Scrolled to top/left')}
  onScrollToLower={(event) => console.log('Scrolled to bottom/right')}
  onScroll={(event) => console.log('Scrolling', event)}
  onRefresherpulling={(event) => console.log('Pulling to refresh')}
  onRefresherrefresh={(event) => console.log('Refresh triggered')}
  onRefresherrestore={(event) => console.log('Refresh restored')}
>
  <View className="inline-block w-[100px]">内容1</View>
  <View className="inline-block w-[100px]">内容2</View>
  <View className="inline-block w-[100px]">内容3</View>
</ScrollView>

// Vertical scrolling with programmatic position control
<ScrollView
  scrollY={true}
  scrollTop={100}
  scrollWithAnimation={true}
  onScroll={(event) => console.log('Position:', event.detail.scrollTop)}
>
  <View className="h-[500px]">Long content</View>
</ScrollView>
```

--------------------------------

### ScrollView Component

Source: https://tuya-docs.vercel.app/component/scrollview

The ScrollView component provides a scrollable view area. It supports both horizontal and vertical scrolling, custom pull-to-refresh functionality, and various scroll event handlers.

```APIDOC
## ScrollView Component

### Description
A scrollable view area component that allows for horizontal and vertical scrolling. It also supports custom pull-to-refresh functionality and various scroll event listeners.

### Usage Example
```javascript
import { ScrollView } from '@ray-js/ray';

<ScrollView 
  scrollX={true}
  refresherEnabled={true}
  className="whitespace-nowrap w-[300px]"
>
  <View className="inline-block w-[100px]">Content 1</View>
  <View className="inline-block w-[100px]">Content 2</View>
</ScrollView>
```

### Notes
- ScrollView cannot be set to flex layout. 
- For horizontal scrolling, use `className="whitespace-nowrap"`. 
- Child elements must have `className="inline-block"` for horizontal scrolling.

### Properties
#### Properties
- **scrollX** (boolean) - Optional - Allows horizontal scrolling. Defaults to `false`.
- **scrollY** (boolean) - Optional - Allows vertical scrolling. Defaults to `false`.
- **scrollTop** (number) - Optional - Sets the position of the vertical scrollbar.
- **scrollLeft** (number) - Optional - Sets the position of the horizontal scrollbar.
- **scrollWithAnimation** (boolean) - Optional - Uses animation transition when setting the scrollbar position.
- **upperThreshold** (number) - Optional - Distance from the top/left edge to trigger the `scrolltoupper` event. Defaults to `50`.
- **lowerThreshold** (number) - Optional - Distance from the bottom/right edge to trigger the `scrolltolower` event. Defaults to `50`.
- **refresherEnabled** (boolean) - Optional - Enables custom pull-to-refresh. Defaults to `false`.
- **refresherThreshold** (number) - Optional - Sets the pull-to-refresh threshold. Defaults to `45`.
- **refresherDefaultStyle** (string) - Optional - Sets the default style for pull-to-refresh. Defaults to `black`.
- **refresherBackground** (string) - Optional - Sets the background color for the pull-to-refresh area. Defaults to `#FFF`.
- **refresherTriggered** (boolean) - Optional - Sets the current state of pull-to-refresh.
- **hideScrollbar** (boolean) - Optional - Hides the scrollbar. Defaults to `true`.

### Events
#### Events
- **onScrollToUpper** (func(event) => void) - Triggered when scrolling to the top/left edge.
- **onScrollToLower** (func(event) => void) - Triggered when scrolling to the bottom/right edge.
- **onScroll** (func(event) => void) - Triggered during scrolling.
- **onRefresherpulling** (func(event) => void) - Triggered when the custom pull-to-refresh control is being pulled.
- **onRefresherrefresh** (func(event) => void) - Triggered when the custom pull-to-refresh is activated.
- **onRefresherrestore** (func(event) => void) - Triggered when the custom pull-to-refresh is reset.
- **onRefresherabort** (func(event) => void) - Triggered when the custom pull-to-refresh is aborted.
```
Tokens:
Raw