DOCSEARCHbyAlgolia
Submit Docs

Taro-hooks

website·Indexed 29 days ago

https://next-version-taro-hooks.vercel.app/site

A collection of hooks for Taro that supports both React and Vue. It provides a comprehensive set of API wrappers and utilities, including useRequest (v3) with SWR, polling, and debounce capabilities, as well as hooks for system information (useSystemInfo), storage (useStorage), network status (useOnline, useNetworkType), and various mini-program specific features like useVibrate, useToast, and useNavigationBar.

Tokens
27.5K
Snippets
168
Records
252
Agent score
73%

What's inside Taro-hooks

  2. Overview of Taro-hooks library

    Taro-hooks is a Hooks library developed to align with Taro APIs, covering nearly all Taro API methods. It integrates and extends common hooks from ahooks (though useRequest is extracted as a separate installation). The library is written in TypeScript for enhanced type hinting and includes extensions for missing H5 features. It uses a 'runtime + plugin' architecture to minimize dependencies, requiring only the framework-specific plugin for the target environment (React, Preact, Nerv, or Vue).

  3. Overview of next-version-taro-hooks

    next-version-taro-hooks is a framework-agnostic library that provides a comprehensive set of hooks for Taro development, supporting both React and Vue. It focuses on full Taro API coverage, TypeScript integration, and extensibility via plugins and custom templates.

  4. Overview of Next Version Taro Hooks

    Next Version Taro Hooks is a framework-agnostic library that provides a complete set of hooks for Taro API integration. It is designed to support both React and Vue, offering full API coverage and TypeScript integration for type-safe development.

  5. Understand taro-hooks v2 package structure

    The v2 architecture splits functionality into several specialized packages to reduce bundle size and provide better modularity:

    • taro-hooks: The main package containing quantified API hooks and high-level business hooks.
    • @taro-hooks/use-request: A dedicated package for useRequest (upgraded to 3x), removing default request services for better control.
    • @taro-hooks/ahooks: Contains basic hooks previously bundled via use-request from ahooks, allowing users to opt-in to these utilities independently.
    • @taro-hooks/plugin-(react|vue): Runtime plugins that ensure consistent hook behavior across different frameworks.

  6. Get the source page route information using useFrom

    The useFrom hook is used to retrieve information about the source page (the page the user navigated from). It serves as an extension to Taro's useRouter functionality. It is supported across WeChat Mini Programs, H5, and ReactNative.
    const from = useFrom();

  7. Prerequisites for using taro-hooks

    To use taro-hooks, you must have basic knowledge of Taro and either React or Vue. taro-hooks follows the Taro 3.x architecture (runtime + framework-plugin) and does not support versions of Taro lower than 3.x. For projects using Taro versions below 3.x, a legacy version is available (supporting React only).

  8. Taro-hooks v2 architecture and platform compatibility

    Taro-hooks v2 adopts Taro's plugin-based architecture. To improve tree-shaking and platform-specific optimization, it replaces the previous 'all-in-one + env' approach. Platform-specific polyfill APIs are now written in .env.ts files, leveraging Taro's built-in platform file resolution capabilities. This allows developers to extend platform capabilities more easily without being restricted to a single file.

  9. Use taro-hooks in React or Vue components

    After installing the main package and the framework plugin, you can import and use hooks directly in your components. The plugin architecture ensures consistent behavior across different frameworks.
    // Works in both index.jsx (React) and index.vue (Vue)
import { useEnv } from 'taro-hooks';

const env = useEnv();

  10. Retrieve page instance and stack using usePage

    The usePage hook is used when you need to access the current page instance or information about the page stack. It returns the current length of the page stack and an object containing the page instance and the full page stack array.

    Caveats:

    • Do not directly modify the retrieved page stack, as this can lead to page state or routing errors.
    • The scope parameter should be used in conjunction with CustomWrapper.
    const [stackLength, { pageInstance, pageStack }] = usePage(scope?: string);

  11. Understand taro-hooks v2.0 package structure

    The taro-hooks v2.0 architecture has been split into several specialized packages to reduce bundle size and provide better modularity:

    • taro-hooks: The main package containing quantified API hooks and high-level business hooks.
    • @taro-hooks/use-request: A dedicated sub-package for useRequest (upgraded to 3x), removing default request services for better control.
    • @taro-hooks/ahooks: Contains basic hooks derived from ahooks that were previously bundled in 1.x, allowing users to opt-in to these utilities independently.
    • @taro-hooks/plugin-(react|vue): Runtime plugins that provide framework-specific capabilities to ensure consistent hook behavior across React and Vue.

  12. Taro-hooks v2 architecture and platform compatibility

    The new architecture follows Taro's plugin system. To improve tree-shaking and platform-specific optimization, the library has moved away from an 'all-in-one + env' approach. Platform-specific polyfill APIs are now written in .env.ts files, utilizing Taro's built-in platform file resolution capabilities.