Taroify

website·Indexed 29 days ago

http://taroify.com/quickstart/

A lightweight, reliable, and multi-terminal Taro React UI component library based on Vant. It provides a comprehensive set of components including Button, Image, Form, Cascader, and more, with support for Semver semantic versioning.

Tokens
85.8K
Snippets
514
Records
698
Agent score
59%

What's inside Taroify

  1. Overview of @taroify/hooks

    @taroify/hooks provides a set of built-in hooks for Taroify development. For projects that have @taroify/core installed, these hooks can be used directly to implement common UI logic and state management.
  2. Overview of Taroify

    Taroify is a lightweight, reliable, multi-terminal Taro React UI component library based on the Vant design language. It provides a consistent, type-safe, and highly customizable development experience for mini-programs and H5 applications, offering over 70 high-quality components with full TypeScript support and a high unit test coverage (>90%).
  3. Handle column data in Taroify Picker onChange event

    Starting from v0.0.25-alpha.0, the onChange event of the Picker component now returns a column object, providing more detailed information about the selected column.
  4. Use the Cascader component in Taroify

    As of version v0.0.18-alpha.0, the Cascader component has been added to the Taroify library, allowing developers to implement cascading selection interfaces.
  5. Use the Stepper component for numeric input

    The Stepper component consists of an increase button, a decrease button, and an input field. It is used to input and adjust numbers within a specific range.
    import { Stepper } from "@taroify/core"
    
    // Basic usage
    <Stepper />
  6. Restrict Sticky component to a specific container

    By passing a reference to an HTML element via the container prop, the Sticky component will remain within the bounds of that container. It will fix to the bottom of the container when the element is about to scroll out of the container's bottom edge.
    import { Sticky } from "@taroify/core"
    import { useRef } from "react"
    import { View } from "@taroify/core"
    
    function StickyWithContainer() {
      const container = useRef()
      return (
        <View ref={container}>
          <Sticky container={container}>
            <Button color="warning">Container Bound Sticky</Button>
          </Sticky>
        </View>
      )
    }