React Loader TS

https://www.npmjs.com/package/react-loader-ts

react-loader-ts is a TypeScript/React library that offers a customizable Loader component, a LoaderContext to manage the loader state for the entire application, and other useful components.

Installation

Using yarn

yarn add react-loader-ts

Using npm

npm install --save react-loader-ts

Uasage

To enable the library, wrap your application with the LoaderProvider.

Here's a quick example:

app.tsx

...otherImports;
import { TestLoading } from "./TestLoading";
import { LoaderProvider } from "react-loader-ts";

import "react-loader-ts/lib/esm/styles/global.css";

export default function Application() {
  return (
    <LoaderProvider>
      <TestLoading />
    </LoaderProvider>
  );
}

Remember to import the styles from react-loader-ts/lib/esm/styles/global.css.

TestLoading.tsx

import { useLoader, Loader } from "react-loader-ts";

export function TestLoading() {
  const { isLoading, setLoading } = useLoader();

  return (
    <>
      <button onClick={() => setLoading(!isLoading)}>Toggle loading</button>
      {isLoading ? <Loader /> : null}
    </>
  );
}

Components

Loader

Property	Type	Optional	Default	Description
variant	Variant	true	Variant.Dots	Change the loader variant (CircleDots or Dots).
inline	boolean	true	false	Make the loader inline.
containerClassName	string	true	undefined	Add a custom class to the loader container.
containerStyle	CSSProperties	true	undefined	Add custom styles to the loader container.
loaderClassName	string	true	undefined	Add a custom class to the loader.
loaderStyle	string	true	undefined	Add custom styles to the loader.

Example:

import { Loader, Variant } from "react-loader-ts";

<Loader
  variant={Variant.Dots}
  containerClassName="custom-container-class"
  containerStyle={{ backgroundColor: "red" }}
  loaderClassName="custom-loader-class"
  loaderStyle={{ width: "50px" }}
 />

WithLoader

This component automatically renders the loader when it's loading and it renders the children when it isn't.

By default the component uses the values from LoaderContext but you can override that behavior using the isLoading prop.

Property	Type	Optional	Default	Description
isLoading	boolean	true	undefined	Override the default logic and don't use the LoaderContext values.
loader	ReactNode	true	undefined	Override the default Loader component and provide a custom one.
variant	Variant	true	Variant.Dots	Change the loader variant (CircleDots or Dots).
inline	boolean	true	false	Make the loader inline.
containerClassName	string	true	undefined	Add a custom class to the loader container.
containerStyle	CSSProperties	true	undefined	Add custom styles to the loader container.
loaderClassName	string	true	undefined	Add a custom class to the loader.
loaderStyle	string	true	undefined	Add custom styles to the loader.

Example:

import { WithLoader } from "react-loader-ts";

// It uses the default isLoading value from LoaderContext
<WithLoader>children</WithLoader>

// It uses the provided isLoading value
<WithLoader isLoading>children</WithLoader>

// It uses the provided loader component
<WithLoader loader={<>custom loader component</>}>children</WithLoader>