0
# Taro Components
1

2
Taro Components is a comprehensive cross-platform UI component library built with Stencil.js that provides 96 UI components following WeChat Mini Program standards. The library supports React, Vue, and Solid frameworks, compiling components to Web Components for H5 platforms while providing native mappings for mini-programs.
3

4
## Package Information
5

6
- **Package Name**: @tarojs/components
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @tarojs/components`
10

11
## Core Imports
12

13
```typescript
14
import { View, Text, Button, Image, ScrollView } from "@tarojs/components";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { View, Text, Button, Image, ScrollView } = require("@tarojs/components");
21
```
22

23
## Basic Usage
24

25
```typescript
26
import { View, Text, Button } from "@tarojs/components";
27

28
// Basic layout structure
29
function App() {
30
  return (
31
    <View className="container">
32
      <Text>Hello Taro Components</Text>
33
      <Button type="primary" onClick={() => console.log("Clicked!")}>
34
        Click Me
35
      </Button>
36
    </View>
37
  );
38
}
39
```
40

41
## Architecture
42

43
Taro Components is built around several key architectural patterns:
44

45
- **Stencil.js Foundation**: Components are built as Web Components using Stencil.js for maximum cross-platform compatibility
46
- **Cross-Platform Strategy**: Components compile to native Web Components for H5/web platforms and map directly to native components on mini-program platforms
47
- **Framework Integrations**: Automatic generation of React, Vue3, and Solid.js wrapper components
48
- **WeChat Mini Program Standards**: All components follow WeChat Mini Program component specifications for consistent behavior
49
- **TypeScript Support**: Full TypeScript definitions with comprehensive prop interfaces and event types
50

51
## Capabilities
52

53
### View Containers
54

55
Foundation layout and container components for structuring application UI, including basic views, scrollable containers, and overlay components.
56

57
```typescript { .api }
58
// Core container components
59
const View: ComponentType<ViewProps>;
60
const ScrollView: ComponentType<ScrollViewProps>;
61
const Block: ComponentType<BlockProps>;
62
const CoverView: ComponentType<CoverViewProps>;
63
const MovableArea: ComponentType<MovableAreaProps>;
64
const MovableView: ComponentType<MovableViewProps>;
65
const Swiper: ComponentType<SwiperProps>;
66
const SwiperItem: ComponentType<SwiperItemProps>;
67
const PageContainer: ComponentType<PageContainerProps>;
68
const RootPortal: ComponentType<RootPortalProps>;
69
```
70

71
[View Containers](./view-containers.md)
72

73
### Basic Content
74

75
Essential content display components for text, icons, progress indicators, and rich text rendering.
76

77
```typescript { .api }
78
// Content display components
79
const Text: ComponentType<TextProps>;
80
const RichText: ComponentType<RichTextProps>;
81
const Icon: ComponentType<IconProps>;
82
const Progress: ComponentType<ProgressProps>;
83
```
84

85
[Basic Content](./basic-content.md)
86

87
### Form Components
88

89
Interactive form elements including inputs, buttons, selectors, and validation components for building user interfaces.
90

91
```typescript { .api }
92
// Form input components
93
const Button: ComponentType<ButtonProps>;
94
const Input: ComponentType<InputProps>;
95
const Textarea: ComponentType<TextareaProps>;
96
const Checkbox: ComponentType<CheckboxProps>;
97
const CheckboxGroup: ComponentType<CheckboxGroupProps>;
98
const Radio: ComponentType<RadioProps>;
99
const RadioGroup: ComponentType<RadioGroupProps>;
100
const Switch: ComponentType<SwitchProps>;
101
const Slider: ComponentType<SliderProps>;
102
const Picker: ComponentType<PickerProps>;
103
const PickerView: ComponentType<PickerViewProps>;
104
const PickerViewColumn: ComponentType<PickerViewColumnProps>;
105
const Editor: ComponentType<EditorProps>;
106
const KeyboardAccessory: ComponentType<KeyboardAccessoryProps>;
107
const Form: ComponentType<FormProps>;
108
const Label: ComponentType<LabelProps>;
109
```
110

111
[Form Components](./form-components.md)
112

113
### Media Components
114

115
Multimedia components for handling audio, video, camera, live streaming, and image display functionality.
116

117
```typescript { .api }
118
// Media components
119
const Image: ComponentType<ImageProps>;
120
const Video: ComponentType<VideoProps>;
121
const Audio: ComponentType<AudioProps>;
122
const Camera: ComponentType<CameraProps>;
123
const LivePlayer: ComponentType<LivePlayerProps>;
124
const LivePusher: ComponentType<LivePusherProps>;
125
const ArCamera: ComponentType<ArCameraProps>;
126
const ChannelLive: ComponentType<ChannelLiveProps>;
127
const ChannelVideo: ComponentType<ChannelVideoProps>;
128
const VoipRoom: ComponentType<VoipRoomProps>;
129
const RtcRoom: ComponentType<RtcRoomProps>;
130
const RtcRoomItem: ComponentType<RtcRoomItemProps>;
131
const Lottie: ComponentType<LottieProps>;
132
```
133

134
[Media Components](./media-components.md)
135

136
### Navigation
137

138
Navigation and routing components for building application navigation structures and managing page transitions.
139

140
```typescript { .api }
141
// Navigation components
142
const Navigator: ComponentType<NavigatorProps>;
143
const NavigationBar: ComponentType<NavigationBarProps>;
144
const FunctionalPageNavigator: ComponentType<FunctionalPageNavigatorProps>;
145
const Tabs: ComponentType<TabsProps>;
146
```
147

148
[Navigation](./navigation.md)
149

150
### Skyline Components
151

152
Advanced UI components including gesture handlers, enhanced layout components, and performance-optimized list views for modern application interfaces.
153

154
```typescript { .api }
155
// Gesture handlers
156
const TapGestureHandler: ComponentType<TapGestureHandlerProps>;
157
const PanGestureHandler: ComponentType<PanGestureHandlerProps>;
158
const LongPressGestureHandler: ComponentType<LongPressGestureHandlerProps>;
159
const ScaleGestureHandler: ComponentType<ScaleGestureHandlerProps>;
160

161
// Enhanced layout components
162
const ListView: ComponentType<ListViewProps>;
163
const GridView: ComponentType<GridViewProps>;
164
const StickyHeader: ComponentType<StickyHeaderProps>;
165
const DraggableSheet: ComponentType<DraggableSheetProps>;
166
```
167

168
[Skyline Components](./skyline-components.md)
169

170
### Platform Integration
171

172
Components for integrating with platform-specific features including advertisements, payment systems, maps, canvas, and web views.
173

174
```typescript { .api }
175
// Platform integration components
176
const Map: ComponentType<MapProps>;
177
const Canvas: ComponentType<CanvasProps>;
178
const WebView: ComponentType<WebViewProps>;
179
const Ad: ComponentType<AdProps>;
180
const AwemeData: ComponentType<AwemeDataProps>;
181
const Login: ComponentType<LoginProps>;
182
const FollowSwan: ComponentType<FollowSwanProps>;
183
const Lifestyle: ComponentType<LifestyleProps>;
184
const OfficialAccount: ComponentType<OfficialAccountProps>;
185
```
186

187
[Platform Integration](./platform-integration.md)
188

189
## Types
190

191
```typescript { .api }
192
// Core interfaces
193
interface StandardProps<T = any, TouchEvent extends BaseTouchEvent<any> = ITouchEvent> extends EventProps<TouchEvent> {
194
  id?: string;
195
  className?: string;
196
  style?: string | CSSProperties;
197
  children?: ReactNode;
198
  key?: string | number;
199
  hidden?: boolean;
200
  animation?: { actions: TaroGeneral.IAnyObject[] } | TaroGeneral.IAnyObject;
201
  ref?: LegacyRef<T>;
202
  dangerouslySetInnerHTML?: { __html: string };
203
  compileMode?: boolean | string;
204
  harmonyDirection?: 'row' | 'column' | 'flex';
205
}
206

207
interface EventProps<TouchEvent extends BaseTouchEvent<any> = ITouchEvent> {
208
  onTouchStart?: (event: TouchEvent) => void;
209
  onTouchMove?: (event: TouchEvent) => void;
210
  onTouchEnd?: (event: TouchEvent) => void;
211
  onTouchCancel?: (event: TouchEvent) => void;
212
  onLongPress?: (event: TouchEvent) => void;
213
  onTransitionEnd?: (event: TaroEvent) => void;
214
  onAnimationStart?: (event: TaroEvent) => void;
215
  onAnimationIteration?: (event: TaroEvent) => void;
216
  onAnimationEnd?: (event: TaroEvent) => void;
217
}
218

219
interface FormItemProps {
220
  name?: string;
221
}
222

223
// Component type helper
224
type ComponentType<P = {}> = React.ComponentType<P>;
225
```