useLoaderControls Hook

The useLoaderControls hook provides functions to start and stop loading states for loaders defined in the BetterHtmlProvider.

Usage

To use the useLoaderControls hook, simply call it within a component.

import { useLoaderControls, Button } from "react-better-html";

function App() {
   const { startLoading, stopLoading } = useLoaderControls();

   const onClickButton = () => {
      startLoading("testLoader");

      setTimeout(() => {
         stopLoading("testLoader");
      }, 2000);
   };

   return <Button text="Click me" onClick={onClickButton} />;
}

danger

Be careful and do not call startLoading and stopLoading at the root of the component. Only call the functions conditionally or inside another function. Calling the same function on every rerender of the component will cause Maximum update depth exceeded error.

Return Value

The hook returns an object with two functions:

{
   startLoading: (loaderName: LoaderName) => boolean;
   stopLoading: (loaderName: LoaderName) => boolean;
}

Notes

• The useLoaderControls hook must be used within a react component.
• The loaderName can be a LoaderName type or any string. This allows for dynamic loader names.
• Use this hook to control the loading states of loaders defined in the BetterHtmlProvider.
• To access the loading state, use the useLoader hook.