Guide
Reference
Roadmap
Guide
Reference
Roadmap

createSingleLoading

Tags:
ProUtilities
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.

🪝 Hook🎨 Demo📄 Document

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 }