Tuya Component Library

https://tuya-docs-no-llms.vercel.app/
Admin
A complete reference for Tuya miniapp development components, providing a comprehensive UI toolkit...
Tokens:8,482
Snippets:31
Trust Score:7.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### React Input Component Usage

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

This example demonstrates how to use the Input component in a React application. It shows basic configuration with value, placeholder, and an input event handler. Ensure the '@ray-js/ray' library is installed.

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

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

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

### React Input Component Examples with @ray-js/ray

Source: https://context7.com/context7/tuya-docs-no-llms_vercel_app/llms.txt

Demonstrates the usage of the Input component from @ray-js/ray for various input types like text, password, number, and ID card. It includes examples of state management, event handling (onInput, onFocus, onBlur, onConfirm), and configuration options like maxLength, password, confirmType, cursor, and selection.

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

const [inputValue, setInputValue] = useState('');
const [password, setPassword] = useState('');

// Basic text input
<Input
  value={inputValue}
  placeholder="Please enter content"
  maxLength={50}
  onInput={(event) => {
    setInputValue(event.detail.value);
    console.log('Current value:', event.detail.value);
  }}
  onFocus={(event) => {
    console.log('Input focused');
  }}
  onBlur={(event) => {
    console.log('Input blurred');
  }}
/>

// Password input with confirm handling
<Input
  type="text"
  password={true}
  value={password}
  placeholder="Enter password"
  confirmType="done"
  onInput={(event) => {
    setPassword(event.detail.value);
  }}
  onConfirm={(event) => {
    console.log('Password submitted:', event.detail.value);
    handlePasswordSubmit(event.detail.value);
  }}
/>

// Number input with cursor control
<Input
  type="number"
  value={inputValue}
  placeholder="Enter number"
  disabled={false}
  cursor={5}
  selectionStart={0}
  selectionEnd={5}
  onInput={(event) => {
    setInputValue(event.detail.value);
  }}
/>

// ID card input
<Input
  type="idcard"
  placeholder="Enter ID card number"
  maxLength={18}
  onInput={(event) => {
    console.log('ID card:', event.detail.value);
  }}
/>
```

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

### React Text Component Examples with @ray-js/ray

Source: https://context7.com/context7/tuya-docs-no-llms_vercel_app/llms.txt

Demonstrates the Text component from @ray-js/ray for displaying text content with various enhancements. Examples include basic text rendering, making text selectable and copyable, adding click event handlers, and applying custom styling using className.

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

// Basic text
<Text>This is a simple text</Text>

// Selectable text
<Text
  selectable={true}
  className="text-lg font-bold"
>
  This text can be selected and copied
</Text>

// Interactive text with click handler
<Text
  onClick={(event) => {
    console.log('Text clicked', event.type);
    // Handle text interaction
    navigateToDetail();
  }}
  className="text-blue-500 underline cursor-pointer"
>
  Click here to learn more
</Text>

// Styled text
<Text className="text-2xl text-gray-800 font-semibold">
  Heading Text
</Text>
```

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

### Textarea Component Usage

Source: https://tuya-docs-no-llms.vercel.app/component/textarea

Provides examples of how to use the Textarea component with different configurations and event handlers.

```APIDOC
## Textarea Component

### Description
A multi-line input field component.

### Props
#### Standard Props
- **id** (string) - Optional - The unique identifier for the component.
- **style** (CSSProperties) - Optional - Custom CSS styles for the component.
- **className** (string) - Optional - CSS class name for styling.
- **name** (string) - Optional - The name attribute for the input box.
- **value** (string) - Optional - The content of the input box.
- **placeholder** (string) - Optional - Placeholder text displayed when the input is empty.
- **placeholderStyle** (string) - Optional - Styles for the placeholder text (e.g., color, fontSize, fontWeight).
- **disabled** (boolean) - Optional - Defaults to `false`. If `true`, the input is disabled.
- **maxlength** (number) - Optional - Defaults to `140`. Maximum input length. Set to -1 for no limit.
- **autoHeight** (boolean) - Optional - Defaults to `false`. If `true`, the input automatically adjusts its height. `style.height` is ignored when `autoHeight` is true.

### Events
#### Standard Events
- **onFocus** - Triggered when the input field gains focus. Parameters: `(event: any) => any`.
- **onBlur** - Triggered when the input field loses focus. Parameters: `(event: any) => any`.
- **onInput** - Triggered when typing in the input field. Parameters: `(event: TextareaEvent) => any`.
- **onConfirm** - Triggered when the 'confirm' action is performed. Parameters: `(event: any) => any`.

### Code Example
```javascript
import { Textarea } from '@ray-js/ray';

<Textarea 
  value={textValue}
  placeholder="请输入文本内容"
  onInput={handleTextInput}
/>

<Textarea 
  autoHeight={true}
  maxlength={200}
  disabled={true}
/>
```
```

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

### Implement Button Component with JavaScript

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

This snippet shows how to use the Button component from the '@ray-js/ray' library in a JavaScript project. It includes an example of rendering a primary button that triggers a click handler when pressed. Ensure you have '@ray-js/ray' installed as a dependency.

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

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

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

### React Checkbox Component Examples with @ray-js/ray

Source: https://context7.com/context7/tuya-docs-no-llms_vercel_app/llms.txt

Illustrates the use of Checkbox and CheckboxGroup components from @ray-js/ray for single and multiple selections. Covers state management for individual checkboxes and groups, and event handling via the onChange prop to capture selected values. Examples include styling with the color prop and disabling options.

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

const [isChecked, setIsChecked] = useState(false);
const [selectedFruits, setSelectedFruits] = useState([]);

// Single checkbox
<Checkbox
  value="option1"
  checked={isChecked}
  color="#007AFF"
  disabled={false}
  onChange={(event) => {
    const { value, checked } = event.detail;
    setIsChecked(checked);
    console.log('Checkbox changed:', value, checked);
  }}
>
  Accept Terms and Conditions
</Checkbox>

// Checkbox group
<CheckboxGroup
  onChange={(event) => {
    const selectedValues = event.detail.value;
    setSelectedFruits(selectedValues);
    console.log('Selected items:', selectedValues);
    // Output: ['apple', 'banana']
  }}
>
  <Checkbox value="apple" color="#FF6B6B">Apple</Checkbox>
  <Checkbox value="banana" color="#4ECDC4">Banana</Checkbox>
  <Checkbox value="orange" color="#FFD93D">Orange</Checkbox>
  <Checkbox value="grape" disabled={true}>Grape (unavailable)</Checkbox>
</CheckboxGroup>
```

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

### Canvas Component Usage (React)

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

Example of how to use the Canvas component in a React application. It demonstrates importing the necessary components and rendering the Canvas with basic properties and event handlers.

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

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

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

### Form Component Usage with React

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

Example demonstrating how to use the Form component from '@ray-js/ray' to create a form with input fields and a submit button. The `onSubmit` event handler is used to capture form data.

```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>
```

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

### Radio Component Usage - React (Ray.js)

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

Example demonstrating how to use the Radio component and RadioGroup from the '@ray-js/ray' library. It shows how to set the checked state and handle changes.

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

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

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

### View Component Usage Example (React)

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

Demonstrates how to use the View component for basic layout and with hover effects. It requires the '@ray-js/ray' library. The component renders content within a container and can apply custom styles and hover states.

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

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

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

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

### React Form Component with @ray-js/ray

Source: https://context7.com/context7/tuya-docs-no-llms_vercel_app/llms.txt

Shows how to use the Form component from @ray-js/ray to group Input and Button components for data collection and submission. It details how to handle form submission using onSubmit, which provides form data in event.detail.value, and form resetting with onReset. Includes an example of submitting data to a server using fetch API.

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

<Form
  reportSubmit={true}
  onSubmit={(event) => {
    const formData = event.detail.value;
    console.log('Form submitted:', formData);
    // formData structure: { name: 'John', email: 'john@example.com' }

    // Submit to server
    fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
      console.log('Form submitted successfully:', data);
    })
    .catch(error => {
      console.error('Form submission error:', error);
    });
  }}
  onReset={(event) => {
    console.log('Form reset');
    // Clear form state
  }}
>
  <Input name="name" placeholder="Enter name" />
  <Input name="email" placeholder="Enter email" />
  <Input name="phone" type="number" placeholder="Enter phone" />

  <Button formType="submit">Submit</Button>
  <Button formType="reset">Reset</Button>
</Form>
```

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

### Picker Component Usage in React

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

Demonstrates how to use the Picker component from '@ray-js/ray' in a React application. It shows examples for both 'selector' mode to choose from a list of options and 'time' mode to select a specific time. Requires the '@ray-js/ray' library.

```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>
```

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

### Picker Component with Multiple Modes (React)

Source: https://context7.com/context7/tuya-docs-no-llms_vercel_app/llms.txt

Demonstrates the use of the Picker component from '@ray-js/ray' for user selections. Includes examples for 'selector' mode (single item, object array), 'time' mode, and 'date' mode, along with cancel event handling. Requires 'react' for state management.

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

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

// Single selector picker
<Picker
  mode="selector"
  range={['Option 1', 'Option 2', 'Option 3']}
  value={selectedIndex}
  onChange={(event) => {
    const index = event.detail.value;
    setSelectedIndex(index);
    console.log('Selected index:', index);
  }}
  onCancel={(event) => {
    console.log('Picker cancelled');
  }}
>
  <View className="picker-trigger">
    Click to select: Option {selectedIndex + 1}
  </View>
</Picker>

// Time picker
<Picker
  mode="time"
  value={selectedTime}
  start="09:00"
  end="18:00"
  onChange={(event) => {
    const time = event.detail.value;
    setSelectedTime(time);
    console.log('Selected time:', time);
  }}
>
  <View>Select time: {selectedTime}</View>
</Picker>

// Date picker
<Picker
  mode="date"
  value="2024-01-01"
  start="2020-01-01"
  end="2025-12-31"
  fields="day"
  onChange={(event) => {
    const date = event.detail.value;
    console.log('Selected date:', date);
  }}
>
  <View>Select date</View>
</Picker>

// Object array picker
const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Orange' }
];

<Picker
  mode="selector"
  range={items}
  rangeKey="name"
  onChange={(event) => {
    const index = event.detail.value;
    console.log('Selected item:', items[index]);
  }}
>
  <View>Select fruit</View>
</Picker>
```

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

### ScrollView Component: Horizontal, Vertical, and Pull-to-Refresh

Source: https://context7.com/context7/tuya-docs-no-llms_vercel_app/llms.txt

Illustrates the ScrollView component for creating scrollable containers, supporting horizontal and vertical scrolling, along with pull-to-refresh functionality. It includes examples for scroll event handling and integration with data fetching, using the `@ray-js/ray` package.

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

// Horizontal scrolling container
<ScrollView
  scrollX={true}
  className="whitespace-nowrap w-[300px]"
  scrollLeft={0}
  scrollWithAnimation={true}
  hideScrollbar={false}
  onScroll={(event) => {
    console.log('Scroll position:', event.detail);
  }}
  onScrollToLower={(event) => {
    console.log('Reached bottom');
    // Load more data
  }}
>
  <View className="inline-block w-[100px]">Item 1</View>
  <View className="inline-block w-[100px]">Item 2</View>
  <View className="inline-block w-[100px]">Item 3</View>
</ScrollView>

// Vertical scrolling with pull-to-refresh
<ScrollView
  scrollY={true}
  refresherEnabled={true}
  refresherThreshold={45}
  refresherBackground="#FFF"
  refresherTriggered={isRefreshing}
  upperThreshold={50}
  lowerThreshold={50}
  onRefresherrefresh={(event) => {
    // Handle pull-to-refresh
    fetchNewData().then(() => {
      setIsRefreshing(false);
    });
  }}
  onScrollToUpper={(event) => {
    console.log('Scrolled to top');
  }}
>
  <View>Content here</View>
</ScrollView>
```

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

### ScrollView Basic Usage with Horizontal Scrolling

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

Demonstrates the basic implementation of a ScrollView component that allows horizontal scrolling. It requires specific class names ('whitespace-nowrap' for the container and 'inline-block' for children) to function correctly in horizontal mode. This example uses React Native syntax.

```javascript
import { ScrollView } 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>
```

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

### React Native Slider Component Usage

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

This snippet demonstrates how to use the Slider component from '@ray-js/ray'. It shows basic setup with value and onChange handlers, and a more advanced configuration with min, max, showValue, and activeColor properties. The Slider component allows users to select a value within a defined range.

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

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

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

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

### View Component: Basic, Interactive, and Styled Containers

Source: https://context7.com/context7/tuya-docs-no-llms_vercel_app/llms.txt

Demonstrates the usage of the View component for creating basic, interactive, and styled containers in Tuya miniapp applications. It supports styling, hover effects, and touch event handling, utilizing the `@ray-js/ray` package.

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

// Basic container with styling
<View className="p-5 bg-gray-100">
  <Text>This is a view container</Text>
</View>

// Interactive view with hover effect
<View
  hoverClassName="hover-class"
  hoverStartTime={50}
  hoverStayTime={100}
  onClick={(event) => {
    console.log('View clicked', event);
  }}
  onTouchStart={(event) => {
    console.log('Touch started', event);
  }}
>
  <Text>Tappable view with hover state</Text>
</View>

// Styled view with inline styles
<View
  style={{
    padding: 20,
    backgroundColor: '#f5f5f5',
    borderRadius: 8
  }}
>
  <Text>Content here</Text>
</View>
```

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

### Button Component: Primary, Loading, and Form Submission

Source: https://context7.com/context7/tuya-docs-no-llms_vercel_app/llms.txt

Shows the implementation of the Button component with various styles, including primary, default, and plain buttons, as well as handling loading states and form submission types. It utilizes the `@ray-js/ray` package and supports click and touch event handlers.

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

// Primary button with click handler
<Button
  type="primary"
  size="default"
  onClick={(event) => {
    console.log('Button clicked');
  }}
>
  Click Me
</Button>

// Loading button with custom hover effect
<Button
  type="primary"
  loading={true}
  disabled={false}
  hoverClassName="button-hover-custom"
  hoverStartTime={20}
  hoverStayTime={70}
  onTouchStart={(event) => {
    console.log('Touch started');
  }}
  onTouchEnd={(event) => {
    console.log('Touch ended');
  }}
>
  Processing...
</Button>

// Form submit button
<Button
  type="default"
  size="large"
  formType="submit"
  plain={false}
  disabled={false}
>
  Submit Form
</Button>

// Plain/outlined button
<Button
  type="primary"
  plain={true}
  onClick={handleClick}
>
  Outlined Button
</Button>
```

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

### Image Component with Scaling and Load Events (React)

Source: https://context7.com/context7/tuya-docs-no-llms_vercel_app/llms.txt

Displays an image with support for multiple scaling modes ('scaleToFill', 'aspectFit', 'aspectFill') and handles 'onLoad' and 'onError' events. It shows how to manage image loading state and log image dimensions or error messages. Dependencies include '@ray-js/ray' and 'react'.

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

const [imageLoaded, setImageLoaded] = useState(false);

// Basic image
<Image
  src="https://example.com/image.jpg"
  mode="scaleToFill"
  className="w-full h-48"
  onLoad={(event) => {
    const { width, height } = event.detail;
    console.log('Image loaded:', width, height);
    setImageLoaded(true);
  }}
  onError={(event) => {
    console.error('Image load error:', event.detail.errMsg);
    // Show fallback image
  }}
/>

// Image with fade-in animation
<Image
  src="https://example.com/photo.png"
  mode="aspectFit"
  fadeDuration={300}
  className="rounded-lg shadow-lg"
  onLoad={(event) => {
    console.log('Image dimensions:', event.detail);
  }}
/>

// Cover mode image for cards
<Image
  src="https://example.com/card-bg.jpg"
  mode="aspectFill"
  className="w-[200px] h-[150px] object-cover"
  onError={(event) => {
    console.error('Failed to load:', event.detail.errMsg);
  }}
/>
```

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

### Textarea Component Usage (React)

Source: https://tuya-docs-no-llms.vercel.app/component/textarea

Demonstrates the basic usage of the Textarea component in a React application. It shows how to bind input values, set placeholders, and handle input events. It also illustrates the use of autoHeight, maxlength, and disabled properties.

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

<Textarea 
  value={textValue}
  placeholder="请输入文本内容"
  onInput={handleTextInput}
/>

<Textarea 
  autoHeight={true}
  maxlength={200}
  disabled={true}
/>
```

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

### Switch Component API

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

API details for the Switch component, including its properties and events.

```APIDOC
## Switch Component

### Description

A versatile switch component that allows users to toggle between two states, with options for different visual styles.

### Properties

#### Properties
- **checked** (boolean) - Optional - Default: `false` - Indicates whether the switch is currently checked.
- **disabled** (boolean) - Optional - Default: `false` - Disables the switch, making it unclickable.
- **color** (string) - Optional - Default: `#007AFF` - Sets the color of the switch, similar to CSS `color` property.
- **type** (string) - Optional - Default: `switch` - Specifies the visual style of the component. Valid values are `switch` and `checkbox`.

### Events

#### Events
- **onChange** (function) - The `onChange` event is triggered when the checked state of the switch changes. The event object contains `detail` with the new `value`.

### Usage Example

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

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

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

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

### React Switch Component Usage

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

Demonstrates how to implement the Switch component in a React application using the '@ray-js/ray' library. It shows basic usage with checked state and onChange event handling, as well as customization with type and CSS classes.

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

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

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

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

### Button Component API

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

This section details the properties and events for the Button component.

```APIDOC
## Button Component API

### Description

Provides details on the properties and events available for the Button component.

### 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 component 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 - Specifies the class for the button's pressed state. 'none' removes the click effect.
#### hoverStyle (StyleProp<ViewStyle>) - Optional - RN specific property for styling the button when pressed, similar to style.
#### hoverStopPropagation (boolean) - Optional - Specifies whether to prevent ancestor nodes from showing a click state.
#### hoverStartTime (number) - Optional - Time in milliseconds after pressing before the click state appears (default: 20).
#### hoverStayTime (number) - Optional - Time in milliseconds the click state is retained after the finger is released (default: 70).

### Events

#### onClick (event: MouseEvent) => void - Button click event
#### onTouchStart (event: TouchEvent) => void - Touch start event
#### onTouchEnd (event: TouchEvent) => void - Touch end event

### Example Usage

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

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

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

### Map Component with Markers and Interaction

Source: https://context7.com/context7/tuya-docs-no-llms_vercel_app/llms.txt

Implements an interactive map using the '@ray-js/ray' Map component. It displays markers with custom icons and titles, and handles tap events on markers and the map itself. The map supports zooming and region changes, and allows adding new markers dynamically. Dependencies include '@ray-js/ray' for the Map component and React's useState hook for managing marker data.

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

const [markers, setMarkers] = useState([
  {
    id: 1,
    latitude: 39.90923,
    longitude: 116.397428,
    title: 'Marker 1',
    iconPath: '/images/marker.png'
  },
  {
    id: 2,
    latitude: 39.91,
    longitude: 116.40,
    title: 'Marker 2'
  }
]);

// Basic map with markers
<Map
  longitude={116.397428}
  latitude={39.90923}
  scale={16}
  minScale={4}
  maxScale={19}
  markers={markers}
  className="w-full h-[400px]"
  onMarkertap={(event) => {
    const markerId = event.detail.markerId;
    console.log('Marker tapped:', markerId);
    const marker = markers.find(m => m.id === markerId);
    console.log('Marker details:', marker);
  }}
  onRegionchange={(event) => {
    const { type, causedBy } = event.detail;
    console.log('Region changed:', type, causedBy);
  }}
  onTap={(event) => {
    const { latitude, longitude } = event.detail;
    console.log('Map tapped at:', latitude, longitude);
    // Add new marker
    const newMarker = {
      id: markers.length + 1,
      latitude,
      longitude,
      title: `Marker ${markers.length + 1}`
    };
    setMarkers([...markers, newMarker]);
  }}
/>
```

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

### Canvas Component

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

This section provides details on the Canvas component's attributes and events.

```APIDOC
## Canvas Component

### Description
This component allows for drawing graphics and other visual elements on a canvas. It supports touch events for user interaction and can be configured with various properties.

### Method
N/A (Component Definition)

### Endpoint
N/A (Component Definition)

### Parameters
#### Attributes
- **type** (string) - Optional - The type of canvas. Valid value is '2d'.
- **canvasId** (string) - Required - The unique identifier for the canvas component. If `type` is specified, this attribute is not needed.
- **id** (string) - Optional - The unique identifier for the component.
- **disableScroll** (boolean) - Optional - Defaults to `false`. Prevents screen scrolling and pull-to-refresh when moving on the canvas with bound gesture events.

### Events
- **onTouchStart** - Triggered when a touch action begins on the canvas.
- **onTouchMove** - Triggered when the finger moves after touching the canvas.
- **onTouchEnd** - Triggered when a touch action ends.
- **onTouchCancel** - Triggered when a touch action is interrupted (e.g., by a call or dialog).
- **onLongtap** - Triggered after a 500ms finger long press. Moving the finger after this event will not cause screen scrolling.
- **onError** - Triggered when an error occurs. `detail` will contain `{errMsg}`.

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

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

### Response
N/A (Component Definition)
```

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

### Displaying Progress with Percent - React

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

This snippet demonstrates how to use the Progress component to display a percentage of progress. It requires the '@ray-js/ray' library. The primary input is the 'percent' prop, a number between 0 and 100.

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

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

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

### Canvas Component for Drawing and Touch Interaction

Source: https://context7.com/context7/tuya-docs-no-llms_vercel_app/llms.txt

Utilizes the '@ray-js/ray' Canvas component to create a drawing surface. It demonstrates drawing basic shapes like rectangles and circles, adding text, and handling touch events for drawing lines. The component also includes long-tap functionality to clear the canvas and an error handler. Dependencies include '@ray-js/ray' for the Canvas component and its context functions, along with React's useEffect and useRef hooks.

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

const canvasRef = useRef(null);

useEffect(() => {
  // Get canvas context and draw
  const ctx = createCanvasContext('myCanvas');

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

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

  // Draw text
  ctx.setFontSize(20);
  ctx.setFillStyle('#000000');
  ctx.fillText('Hello Canvas', 50, 250);

  // Commit drawing
  ctx.draw();
}, []);

<Canvas
  canvasId="myCanvas"
  className="w-[300px] h-[300px] border border-gray-300"
  disableScroll={true}
  onTouchStart={(event) => {
    const { x, y } = event.touches[0];
    console.log('Touch start:', x, y);
    // Begin drawing path
  }}
  onTouchMove={(event) => {
    const { x, y } = event.touches[0];
    const ctx = createCanvasContext('myCanvas');
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.draw(true);
  }}
  onTouchEnd={(event) => {
    console.log('Touch ended');
  }}
  onLongtap={(event) => {
    console.log('Long tap detected');
    // Clear canvas
    const ctx = createCanvasContext('myCanvas');
    ctx.clearRect(0, 0, 300, 300);
    ctx.draw();
  }}
  onError={(event) => {
    console.error('Canvas error:', event.detail.errMsg);
  }}
/>
```

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

### Video Player with Controls and Playback Events (React)

Source: https://context7.com/context7/tuya-docs-no-llms_vercel_app/llms.txt

Implements a video player using the '@ray-js/ray' Video component. Supports features like controls, autoplay, poster images, and event handling for playback ('onPlay', 'onPause', 'onEnded'), time updates ('onTimeUpdate'), and errors ('onError').

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

// Basic video player with controls
<Video
  src="https://example.com/video.mp4"
  controls={true}
  duration={120}
  onPlay={(event) => {
    console.log('Video started playing');
  }}
  onPause={(event) => {
    console.log('Video paused');
  }}
  onEnded={(event) => {
    console.log('Video ended');
    // Handle video completion
  }}
/>

// Autoplay video with poster
<Video
  src="https://example.com/promo.mp4"
  poster="https://example.com/poster.jpg"
  autoplay={true}
  controls={true}
  loop={false}
  muted={false}
  onTimeUpdate={(event) => {
    console.log('Current time:', event.detail.currentTime);
  }}
  onError={(event) => {
    console.error('Video error:', event.detail);
  }}
/>

// Custom video player
<Video
  src="https://example.com/tutorial.mp4"
  controls={false}
  className="w-full h-[300px]"
  onPlay={(event) => {
    console.log('Playing');
  }}
  onWaiting={(event) => {
    console.log('Buffering...');
  }}
/>
```

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

### Checkbox and CheckboxGroup Component Usage (React)

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

This snippet demonstrates how to use the Checkbox and CheckboxGroup components. It shows how to handle individual checkbox changes and group selections. It requires the '@ray-js/ray' library.

```jsx
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>
```

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

### View Component

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

The View component is a fundamental building block for creating page layouts. It acts as a container for other elements and supports various styling and interaction properties.

```APIDOC
## View Component

### Description
Used for page layout elements. The View component acts as a container for other elements and supports various styling and interaction properties.

### Method
N/A (Component documentation)

### Endpoint
N/A (Component documentation)

### Parameters
#### Properties
- **style** (CSSProperties) - Optional - Component's style.
- **className** (string) - Optional - Style class name.
- **hoverClassName** (string) - Optional - Style class name when the component is pressed.
- **hoverStyle** (string) - Optional - Style when the component is pressed.
- **hoverStartTime** (number) - Optional - The time in milliseconds before the pressed state appears after pressing down. Defaults to 20.
- **hoverStayTime** (number) - Optional - The time in milliseconds the pressed state is retained after the finger is released. Defaults to 70.

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

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

### Response
#### Success Response (N/A for components)
N/A

#### Response Example
N/A

### Events
- **onClick**: (event: MouseEvent) => void - Click event.
- **onTouchStart**: (event: TouchEvent) => void - Touch start event.
- **onTouchEnd**: (event: TouchEvent) => void - Touch end event.
- **onTouchMove**: (event: TouchEvent) => void - Touch move event.
```

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

### ScrollView Component

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

The ScrollView component allows you to create scrollable regions within your application. It supports both horizontal and vertical scrolling, custom pull-to-refresh functionality, and various styling and event handling options.

```APIDOC
## ScrollView Component

### Description

A scrollable view area component.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Props

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

### Events

- **onScrollToUpper** (func(event) => void) - Triggered when scrolling to the top/left.
- **onScrollToLower** (func(event) => void) - Triggered when scrolling to the bottom/right.
- **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.

### Notes

- `ScrollView` cannot be set to flex layout.
- For horizontal scrolling, `className="whitespace-nowrap"` must be specified.
- For horizontal scrolling, child elements must have `className="inline-block"`.

### Request Example

```javascript
import { ScrollView, View } 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>
```

### Response

N/A (Component Usage)

### Response Example

N/A (Component Usage)
```
Tokens:
Raw