@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:
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.
Documentation
ActionType
type ActionType = (...params: any[]) => Promise<any>;
UseLoadingReturnType
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!