2.3.13 • Published 6 months ago

holy-loader v2.3.13

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

Holy Loader

Holy Loader is a lightweight and customizable top-loading progress bar component, specifically designed for React applications and optimized for Next.js with app router.

Want to see it in use? Visit: GameGator.

Also check out Holy Time, yet another (type-safe) date time library.

Features

  • Easy to integrate with any React application.
  • Highly customizable with sensible defaults.
  • Utilizes a custom implementation for smooth, aesthetic progress indications.
  • Supports dynamic configuration for color, height, speed, easing, and more.
  • Manual controls: Start & stop the loader yourself.
  • i18n ready: Supports ltr (left-to-right) & rtl (right-to-left) layouts with the dir prop.

Installation

To install Holy Loader, run the following command in your project directory:

npm install holy-loader

OR

yarn add holy-loader

Usage

To use Holy Loader in your Next.js application using the app router:

import HolyLoader from "holy-loader";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <HolyLoader />
      {children}
    </html>
  );
}

To use Holy Loader in your Next.js application using the pages router:

import HolyLoader from "holy-loader";

export default function App({ Component, pageProps }) {
  return (
    <>
      <HolyLoader />
      <Component {...pageProps} />;
    </>
  );
}

Custom Configuration

import HolyLoader from "holy-loader";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <HolyLoader
        color="linear-gradient(to right, #ff7e5f, #feb47b)"
        height="1rem"
        speed={250}
        easing="linear"
        showSpinner
      />
      {children}
    </html>
  );
}

Manual Control (Client Components)

Have an async operation before an eventual route change? You might be interested in holy-loader's manual controls. These only work in client components!

'use client';

import { startHolyLoader, stopHolyLoader } from 'holy-loader';

try {
  startHolyLoader();
  await signOut()
} catch (error) {
  stopHolyLoader();
} finally {
  stopHolyLoader();
  /* OR */
  router.push('/');
}

Common issues

Prevent triggering the loader when clicking a Button within a Next link:

onClick={(e) => {
  e.preventDefault();
  e.nativeEvent.stopImmediatePropagation();
}}

API

<HolyLoader /> accepts the following props for customization:

PropTypeDescriptionDefault
colorstringSpecifies the color of the top-loading bar. Accepts any valid CSS background value, including gradients.#59a2ff
initialPositionnumberSets the initial position of the top-loading bar as a percentage of the total width.0.08
heightnumber or stringDefines the height of the top-loading bar in pixels or CSS unit.4px
easingstringSpecifies the easing function to use for the loading animation. Accepts any valid CSS easing string.ease
speednumberSets the animation speed of the top-loading bar in milliseconds.200
zIndexnumberDefines the z-index property of the top-loading bar, controlling its stacking order.2147483647
boxShadowstringSets the box-shadow property of the top-loading bar. Turned off by default.null
showSpinnerbooleanDetermines whether to accompany the loading bar with a spinner. Turned off by default.false
ignoreSearchParamsbooleanDetermines whether to ignore search parameters in the URL when triggering the loader. Turned off by default.false
dirltr or rtlSets the direction of the top-loading bar.ltr
2.3.9

8 months ago

2.3.13

6 months ago

2.3.12

6 months ago

2.3.11

8 months ago

2.3.10

8 months ago

2.3.2

10 months ago

2.3.4

10 months ago

2.3.3

10 months ago

2.3.6

10 months ago

2.3.5

10 months ago

2.3.8

9 months ago

2.3.7

10 months ago

2.3.0

1 year ago

2.3.1

1 year ago

2.2.10

1 year ago

2.2.9

1 year ago

2.2.8

1 year ago

2.2.3

2 years ago

2.2.2

2 years ago

2.2.5

2 years ago

2.2.4

2 years ago

2.2.7

2 years ago

2.2.6

2 years ago

2.2.1

2 years ago

2.2.0

2 years ago

2.1.0

2 years ago

2.0.1

2 years ago

1.2.0

2 years ago

2.0.0

2 years ago

1.1.0

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.0

2 years ago