createSingleLoading

This Hook is marked asdeprecatedsincev1.4.0. It has been migrated to @shined/reactive.

A utility that provide a way to manage single (or global) loading state via multiple Hooks or loading instance, using Reactive under the hood.

TIP

You need to install @shined/reactiveto use this utility.

Demo

Source
Loading:
false

Usage

See API for more details.

Source

Click links below to view source on GitHub.

API

import { create } from '@shined/reactive';
const pageLoading = createSingleLoading({ create });
const { set, get, bind, useLoding, useAsyncFn } = pageLoading;

Options

export interface CreateSingleLoadingOptions {
  /**
   * Whether set to false on error
   *
   * @defaultValue true
   */
  resetOnError?: boolean
  /**
   * Initial loading state
   *
   * @defaultValue false
   */
  initialState?: boolean
}

Returns

export interface UseAsyncFnExtendReturns<T extends AnyFunc> extends UseAsyncFnReturns<T> {
  /**
   * Set the loading state
   *
   * @param {boolean} value - `boolean`, the loading value to set
   * @returns {void} `void`
   */
  setLoading: (value: boolean) => void
}

export interface CreateSingleLoadingReturns {
  /**
   * A Hook in React to use bound async function with loading state
   *
   * @param {AnyFunc} asyncFn - `AnyFunc`, the async function to bind, see {@link AnyFunc}
   * @returns {UseAsyncFnExtendReturns} see {@link UseAsyncFnExtendReturns}
   */
  useAsyncFn: <T extends AnyFunc>(asyncFn: T) => UseAsyncFnExtendReturns<T>
  /**
   * A Hook in React to use loading state
   *
   * @returns {boolean} `boolean`, the loading state
   */
  useLoading(): boolean
  /**
   * Set the loading state via store via instance
   *
   * @param {boolean} value - `boolean`, the value to set
   * @returns {void} `void`
   */
  set: (value: boolean) => void
  /**
   * Get the loading state via store via instance
   *
   * @returns {boolean} `boolean`, the loading state
   */
  get(): boolean
  /**
   * Bind the loading state to the async function via instance
   *
   * @param {AnyFunc} asyncFn - `AnyFunc`, the async function to bind, see {@link AnyFunc}
   * @returns {AnyFunc} `AnyFunc`, same as `asyncFn` param, see {@link AnyFunc}
   */
  bind: <T extends AnyFunc>(asyncFn: T) => T
}