# @patrickxu/use-loading

> @patrickxu/use-loading is a custom React hook effortlessly manages the loading state of asynchronous functions.

Latest version **0.0.5** (published 2023-07-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @patrickxu/use-loading
pnpm add @patrickxu/use-loading
yarn add @patrickxu/use-loading
bun add @patrickxu/use-loading
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2023-07-18 |
| First published | 2023-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 67.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | patrickxunuo |
| Maintainers | patrickxunuo |

## Links

- npm: https://www.npmjs.com/package/@patrickxu/use-loading
- Repository: https://github.com/patrickxunuo/use-loading
- Homepage: https://github.com/patrickxunuo/use-loading#readme
- Issues: https://github.com/patrickxunuo/use-loading/issues
- npm.io page: https://npm.io/package/@patrickxu/use-loading

## Recent versions

- 0.0.5 (latest) — 2023-07-18
- 0.0.4 — 2023-07-18
- 0.0.3 — 2023-07-18
- 0.0.2 — 2023-07-18
- 0.0.1 — 2023-07-18

## README

# @patrickxu/use-loading 

@patrickxu/use-loading is a custom React hook effortlessly manages the loading state of asynchronous functions.

## Installation

To install @patrickxu/use-loading, simply run:

    npm install @patrickxu/use-loading

or

    yarn add @patrickxu/use-loading

## Usage

To use, simply import useLoading from @patrickxu/use-loading:

```jsx
import useLoading from '@patrickxu/use-loading';

const sleep = (millisecond = 500) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(true);
    }, millisecond);
  });
}

const App = () => {
  const { groupHandler, isLoading } = useLoading();

  const asyncFunction = groupHandler(async () => {
    await sleep();
  }, "key 1");

  return (
    <>
      <button onClick={asyncFunction1}>
        sleep for 500ms ("key 1")
      </button>
      <span>
        {`isLoading: ${isLoading}`}
      </span>
    </>);
};
```
For a more detailed example, please refer to the CodeSandbox [demo](https://codesandbox.io/s/lingering-feather-93kw25).


## Documentation

### ActionType

```tsx
type ActionType = (...params: any[]) => Promise<any>;
```


### UseLoadingReturnType
```tsx
interface UseLoadingReturnType {
    // state indicating whether async function is running
    isLoading: boolean;
    // state indicating whether async function throws an error
    isError: boolean;
    // the handler returned if you pass an async function as input
    handleAction: ActionType;
    // the handler for multiple async function share the same loading state
    groupHandler: (fun: ActionType, key?: string) => ActionType;
    // the keys of async function that are running
    keys: string[];
}
```

## Contributing
If you'd like to contribute to @patrickxu/use-loading, feel free to submit a pull request or open an issue on GitHub. We welcome all contributions and feedback!

---
_Source: https://npm.io/package/@patrickxu/use-loading · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._