or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

basic-content.mdform-components.mdindex.mdmedia-components.mdnavigation.mdplatform-integration.mdskyline-components.mdview-containers.md
tile.json

tessl/npm-tarojs--components

Comprehensive cross-platform component library that forms part of the Taro framework, providing 96 UI components that follow WeChat Mini Program standards while supporting React and Vue frameworks.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tarojs/components@4.1.x

To install, run

npx @tessl/cli install tessl/npm-tarojs--components@4.1.0

index.mddocs/

Taro Components

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.

Package Information

  • Package Name: @tarojs/components
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tarojs/components

Core Imports

import { View, Text, Button, Image, ScrollView } from "@tarojs/components";

For CommonJS:

const { View, Text, Button, Image, ScrollView } = require("@tarojs/components");

Basic Usage

import { View, Text, Button } from "@tarojs/components";

// Basic layout structure
function App() {
  return (
    <View className="container">
      <Text>Hello Taro Components</Text>
      <Button type="primary" onClick={() => console.log("Clicked!")}>
        Click Me
      </Button>
    </View>
  );
}

Architecture

Taro Components is built around several key architectural patterns:

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

Capabilities

View Containers

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

// Core container components
const View: ComponentType<ViewProps>;
const ScrollView: ComponentType<ScrollViewProps>;
const Block: ComponentType<BlockProps>;
const CoverView: ComponentType<CoverViewProps>;
const MovableArea: ComponentType<MovableAreaProps>;
const MovableView: ComponentType<MovableViewProps>;
const Swiper: ComponentType<SwiperProps>;
const SwiperItem: ComponentType<SwiperItemProps>;
const PageContainer: ComponentType<PageContainerProps>;
const RootPortal: ComponentType<RootPortalProps>;

View Containers

Basic Content

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

// Content display components
const Text: ComponentType<TextProps>;
const RichText: ComponentType<RichTextProps>;
const Icon: ComponentType<IconProps>;
const Progress: ComponentType<ProgressProps>;

Basic Content

Form Components

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

// Form input components
const Button: ComponentType<ButtonProps>;
const Input: ComponentType<InputProps>;
const Textarea: ComponentType<TextareaProps>;
const Checkbox: ComponentType<CheckboxProps>;
const CheckboxGroup: ComponentType<CheckboxGroupProps>;
const Radio: ComponentType<RadioProps>;
const RadioGroup: ComponentType<RadioGroupProps>;
const Switch: ComponentType<SwitchProps>;
const Slider: ComponentType<SliderProps>;
const Picker: ComponentType<PickerProps>;
const PickerView: ComponentType<PickerViewProps>;
const PickerViewColumn: ComponentType<PickerViewColumnProps>;
const Editor: ComponentType<EditorProps>;
const KeyboardAccessory: ComponentType<KeyboardAccessoryProps>;
const Form: ComponentType<FormProps>;
const Label: ComponentType<LabelProps>;

Form Components

Media Components

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

// Media components
const Image: ComponentType<ImageProps>;
const Video: ComponentType<VideoProps>;
const Audio: ComponentType<AudioProps>;
const Camera: ComponentType<CameraProps>;
const LivePlayer: ComponentType<LivePlayerProps>;
const LivePusher: ComponentType<LivePusherProps>;
const ArCamera: ComponentType<ArCameraProps>;
const ChannelLive: ComponentType<ChannelLiveProps>;
const ChannelVideo: ComponentType<ChannelVideoProps>;
const VoipRoom: ComponentType<VoipRoomProps>;
const RtcRoom: ComponentType<RtcRoomProps>;
const RtcRoomItem: ComponentType<RtcRoomItemProps>;
const Lottie: ComponentType<LottieProps>;

Media Components

Navigation

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

// Navigation components
const Navigator: ComponentType<NavigatorProps>;
const NavigationBar: ComponentType<NavigationBarProps>;
const FunctionalPageNavigator: ComponentType<FunctionalPageNavigatorProps>;
const Tabs: ComponentType<TabsProps>;

Navigation

Skyline Components

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

// Gesture handlers
const TapGestureHandler: ComponentType<TapGestureHandlerProps>;
const PanGestureHandler: ComponentType<PanGestureHandlerProps>;
const LongPressGestureHandler: ComponentType<LongPressGestureHandlerProps>;
const ScaleGestureHandler: ComponentType<ScaleGestureHandlerProps>;

// Enhanced layout components
const ListView: ComponentType<ListViewProps>;
const GridView: ComponentType<GridViewProps>;
const StickyHeader: ComponentType<StickyHeaderProps>;
const DraggableSheet: ComponentType<DraggableSheetProps>;

Skyline Components

Platform Integration

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

// Platform integration components
const Map: ComponentType<MapProps>;
const Canvas: ComponentType<CanvasProps>;
const WebView: ComponentType<WebViewProps>;
const Ad: ComponentType<AdProps>;
const AwemeData: ComponentType<AwemeDataProps>;
const Login: ComponentType<LoginProps>;
const FollowSwan: ComponentType<FollowSwanProps>;
const Lifestyle: ComponentType<LifestyleProps>;
const OfficialAccount: ComponentType<OfficialAccountProps>;

Platform Integration

Types

// Core interfaces
interface StandardProps<T = any, TouchEvent extends BaseTouchEvent<any> = ITouchEvent> extends EventProps<TouchEvent> {
  id?: string;
  className?: string;
  style?: string | CSSProperties;
  children?: ReactNode;
  key?: string | number;
  hidden?: boolean;
  animation?: { actions: TaroGeneral.IAnyObject[] } | TaroGeneral.IAnyObject;
  ref?: LegacyRef<T>;
  dangerouslySetInnerHTML?: { __html: string };
  compileMode?: boolean | string;
  harmonyDirection?: 'row' | 'column' | 'flex';
}

interface EventProps<TouchEvent extends BaseTouchEvent<any> = ITouchEvent> {
  onTouchStart?: (event: TouchEvent) => void;
  onTouchMove?: (event: TouchEvent) => void;
  onTouchEnd?: (event: TouchEvent) => void;
  onTouchCancel?: (event: TouchEvent) => void;
  onLongPress?: (event: TouchEvent) => void;
  onTransitionEnd?: (event: TaroEvent) => void;
  onAnimationStart?: (event: TaroEvent) => void;
  onAnimationIteration?: (event: TaroEvent) => void;
  onAnimationEnd?: (event: TaroEvent) => void;
}

interface FormItemProps {
  name?: string;
}

// Component type helper
type ComponentType<P = {}> = React.ComponentType<P>;