A React context for managing global loading state in your application.
npm install global-loading-statebash
npm install global-loading-state
or
yarn add global-loading-state
`
Usage
$3
`jsx
import React from "react";
import { useGlobalLoading } from "global-loading-state";
const Button = () => {
const isLoading = useGlobalLoading();
return (
);
};
export default Button;
`
$3
`jsx
import React from "react";
import { setGlobalLoading } from "global-loading-state";
const DataFetcher = () => {
const fetchData = async () => {
setGlobalLoading(true);
try {
await fetch("https://api.example.com/data");
} finally {
setGlobalLoading(false);
}
};
return ;
};
`
API
| Function | Description |
| ---------------------------------- | --------------------------------------------------------- |
| useGlobalLoading() | React hook that returns the current loading state boolean |
| setGlobalLoading(state: boolean) | Function to set the global loading state |
Advanced Usage
You can also directly access the event emitter for more complex scenarios:
`jsx
import { eventEmitter } from "global-loading-state";
// Set loading state to true
eventEmitter.emit("changeLoading", true);
// Set loading state to false
eventEmitter.emit("changeLoading", false);
``