npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

proste-taro-use

v1.0.0

Published

taro的常用hooks

Downloads

1

Readme

react 相关的 hooks 引 用proste-react-use,此库会自动安装可以 在项目中使用

useEvents

发布订阅钩子

// 只使用触发
const toggle = useEvents('key');

// 只进行监听
useEvents('key', fn);

function useEvents<T>(key: string, listener?: (event: T) => void): (args?: T | undefined) => void;

useNavigate

导航钩子

type Params = Record<string, any>;

function useNavigate(): {
  push: <T>(name: string, params?: Params | T | undefined) => void;
  pop: (dep?: number) => void;
  redirect: <T_1>(name: string, params?: Params | T_1 | undefined) => void;
  redirectToTab: (name: string) => void;
  launchTo: (url: string) => void;
  navigate: {
    (delta: number): void;
    <T_2>(name: string, params?: Params | T_2 | undefined): void;
  };
};

useLoading

显示和隐藏 loading

declare type Options = {
  /** 提示的内容 */
  title: string;
  /** 接口调用结束的回调函数(调用成功、失败都会执行) */
  complete?: (res: TaroGeneral.CallbackResult) => void;
  /** 接口调用失败的回调函数 */
  fail?: (res: TaroGeneral.CallbackResult) => void;
  /** 是否显示透明蒙层,防止触摸穿透 */
  mask?: boolean;
  /** 接口调用成功的回调函数 */
  success?: (res: TaroGeneral.CallbackResult) => void;
};
/**
 * 显示和隐藏loading
 *
 * @example
 *
 * const [showLoading] = useLoading();
 *
 * showLoading();
 */
export declare function useLoading(options?: Partial<Options>): {
  showLoading: (opt?: string | Partial<Options> | undefined) => Promise<TaroGeneral.CallbackResult>;
  hideLoading: (opt?: Pick<Options, 'complete' | 'fail' | 'success'>) => void;
};

useModal

显示 modal

declare type SuccessCallbackResult = TaroGeneral.CallbackResult & {
  /** 为 true 时,表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭) */
  cancel: boolean;
  /** 为 true 时,表示用户点击了确定按钮 */
  confirm: boolean;
  /** 调用结果 */
  errMsg: string;
};
declare type Options = {
  /** 取消按钮的文字颜色,必须是 16 进制格式的颜色字符串 */
  cancelColor?: string;
  /** 取消按钮的文字,最多 4 个字符 */
  cancelText?: string;
  /** 接口调用结束的回调函数(调用成功、失败都会执行) */
  complete?: (res: TaroGeneral.CallbackResult) => void;
  /** 确认按钮的文字颜色,必须是 16 进制格式的颜色字符串 */
  confirmColor?: string;
  /** 确认按钮的文字,最多 4 个字符 */
  confirmText?: string;
  /** 提示的内容 */
  content?: string;
  /** 接口调用失败的回调函数 */
  fail?: (res: TaroGeneral.CallbackResult) => void;
  /** 是否显示取消按钮 */
  showCancel?: boolean;
  /** 接口调用成功的回调函数 */
  success?: (result: SuccessCallbackResult) => void;
  /** 提示的标题 */
  title?: string;
};
/**
 * 显示modal
 *
 * @example
 *
 * const showModal = useModal();
 *
 */
export declare function useModal(
  options?: Partial<Options>,
): (opt?: string | Partial<Options> | undefined) => Promise<TaroGeneral.CallbackResult>;

useParams

获取路由参数

function useParams<T extends Record<string, string>>(): Partial<T>;

useStorage

提供读写缓存能力的 hook

function useStorage<T>(key: string): [
  value: T | undefined,
  action: {
    set: (value: T | ((state: T | undefined) => T)) => void;
    get: () => T | undefined;
    remove: () => void;
  },
];

useNavigationBarTitle

设置当前页面标题

function useNavigationBarTitle(title: string): void;

useToast

弹出 toast 提示

declare type Options = {
  /** 提示的内容 */
  title: string;
  /** 接口调用结束的回调函数(调用成功、失败都会执行) */
  complete?: (res: TaroGeneral.CallbackResult) => void;
  /** 提示的延迟时间 */
  duration?: number;
  /** 接口调用失败的回调函数 */
  fail?: (res: TaroGeneral.CallbackResult) => void;
  /** 图标
   *
   * 可选值:
   * - 'success': 显示成功图标,此时 title 文本最多显示 7 个汉字长度;
   * - 'error': 显示失败图标,此时 title 文本最多显示 7 个汉字长度;
   * - 'loading': 显示加载图标,此时 title 文本最多显示 7 个汉字长度;
   * - 'none': 不显示图标,此时 title 文本最多可显示两行 */
  icon?: 'success' | 'error' | 'loading' | 'none';
  /** 自定义图标的本地路径,image 的优先级高于 icon */
  image?: string;
  /** 是否显示透明蒙层,防止触摸穿透 */
  mask?: boolean;
  /** 接口调用成功的回调函数 */
  success?: (res: TaroGeneral.CallbackResult) => void;
};
/**
 * 弹出toast提示
 *
 * @example
 *
 * const [showToast] = useToast({title: '1234'});
 *
 * showToast();
 */
export declare function useToast(options?: Partial<Options>): {
  showToast: (opt?: string | Options | undefined) => Promise<TaroGeneral.CallbackResult>;
  hideToast: (option?: Pick<Options, 'complete' | 'success' | 'fail'> | undefined) => void;
};