react-loader-ts v1.0.9

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

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.

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>