diff --git a/README.md b/README.md index ae9079d..2681eb3 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Also check out [Holy Time](https://github.com/badosz0/holy-time), yet another (t - Easy to integrate with any React application. - Highly customizable with sensible defaults. -- Utilizes NProgress for smooth, aesthetic progress indications. +- Utilizes a custom implementation for smooth, aesthetic progress indications. - Supports dynamic configuration for color, height, speed, easing, and more. ## Installation @@ -97,13 +97,11 @@ onClick={(e) => { ## API -Holy Loader accepts the following props for customization: +`` accepts the following props for customization: - `color` (string): Specifies the color of the top-loading bar. Default: "#59a2ff" (a shade of blue). - `initialPosition` (number): Sets the initial position of the top-loading bar as a percentage of the total width. Default: 0.08 (8% of the total width). -- `trickleSpeed` (number): Determines the delay speed for the incremental movement of the top-loading bar, in milliseconds. Default: 200 milliseconds. - `height` (number | string): Defines the height of the top-loading bar in pixels or css unit. Default: 4 pixels. -- `trickle` (boolean): Enables or disables the automatic incremental movement of the top-loading bar. Default: true (enabled). - `easing` (string): Specifies the easing function to use for the loading animation. Accepts any valid CSS easing string. Default: "ease". - `speed` (number): Sets the animation speed of the top-loading bar in milliseconds. Default: 200 milliseconds. - `zIndex` (number): Defines the z-index property of the top-loading bar, controlling its stacking order. Default: 2147483647. diff --git a/package-lock.json b/package-lock.json index 63169b6..1b40c66 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "holy-loader", - "version": "2.1.0", + "version": "2.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "holy-loader", - "version": "2.1.0", + "version": "2.2.0", "license": "MIT", "dependencies": { "react": "^18.2.0" diff --git a/package.json b/package.json index 3d126c1..ef87ccd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "holy-loader", - "version": "2.1.0", + "version": "2.2.0", "description": "Holy Loader is a lightweight, customizable top-loading progress bar component for React applications.", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -27,7 +27,7 @@ "single-page-application" ], "scripts": { - "build": "tsup && sed -i '' '1s/^/\"use client\";/' dist/index.js", + "build": "tsup", "lint:fix": "eslint --ignore-path .eslintignore --fix --ext .js,.ts . && npm run format:fix", "format:fix": "prettier --ignore-path .gitignore --write \"src/**/*.{ts,tsx}\"", "test": "vitest -c ./vitest.config.ts" diff --git a/src/HolyProgress.ts b/src/HolyProgress.ts index 2008fb3..cb3f8ec 100644 --- a/src/HolyProgress.ts +++ b/src/HolyProgress.ts @@ -17,18 +17,6 @@ type HolyProgressProps = { */ speed: number; - /** - * Specifies if the bar should increment automatically. - * Default: true - */ - trickle: boolean; - - /** - * Specifies the speed of the automatic incrementation. - * Default: 200 - */ - trickleSpeed: number; - /** * Specifies the color of the progress bar. * Default: '#59a2ff' @@ -77,8 +65,6 @@ export class HolyProgress { initialPosition: 0.08, easing: 'linear', speed: 200, - trickle: true, - trickleSpeed: 200, color: '#59a2ff', height: 4, zIndex: 2147483647, @@ -192,16 +178,14 @@ export class HolyProgress { this.setTo(0); } - if (this.settings.trickle) { - this.startTrickle(); - } + this.startTrickle(); return this; }; /** * Performs automatic incrementation of the progress bar. - * This function is recursive and continues to increment the progress at intervals defined by `trickleSpeed`. + * This function is recursive and continues to increment the progress at intervals defined by `sppeed`. * @private */ private readonly startTrickle = (): void => { @@ -209,10 +193,10 @@ export class HolyProgress { if (this.status === null) return; this.increment(); - setTimeout(run, this.settings.trickleSpeed); + setTimeout(run, this.settings.speed); }; - setTimeout(run, this.settings.trickleSpeed); + setTimeout(run, this.settings.speed); }; /** diff --git a/src/constants.ts b/src/constants.ts index 42930e6..0fac7f0 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,9 +1,7 @@ export const DEFAULTS = { color: '#59a2ff', initialPosition: 0.08, - trickleSpeed: 200, height: 4, - trickle: true, easing: 'ease', speed: 200, zIndex: 2147483647, diff --git a/src/index.tsx b/src/index.tsx index 36293ab..ad18b0f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,3 +1,5 @@ +'use client'; + import * as React from 'react'; import { HolyProgress } from './HolyProgress'; import { DEFAULTS } from './constants'; @@ -15,24 +17,12 @@ export interface HolyLoaderProps { */ initialPosition?: number; - /** - * Determines the delay speed for the incremental movement of the top-loading bar, in milliseconds. - * Default: 200 milliseconds - */ - trickleSpeed?: number; - /** * Specifies the height of the top-loading bar in either pixels (number) or css unit (string). * Default: 4 pixels */ height?: number | string; - /** - * Enables or disables the automatic incremental movement of the top-loading bar. - * Default: true (enabled) - */ - trickle?: boolean; - /** * Specifies the easing function to use for the loading animation. Accepts any valid CSS easing string. * Default: "ease" @@ -110,9 +100,7 @@ export const isSameHost = (currentUrl: string, newUrl: string): boolean => { const HolyLoader = ({ color = DEFAULTS.color, initialPosition = DEFAULTS.initialPosition, - trickleSpeed = DEFAULTS.trickleSpeed, height = DEFAULTS.height, - trickle = DEFAULTS.trickle, easing = DEFAULTS.easing, speed = DEFAULTS.speed, zIndex = DEFAULTS.zIndex, @@ -181,8 +169,6 @@ const HolyLoader = ({ holyProgress = new HolyProgress({ color, height, - trickleSpeed, - trickle, initialPosition, easing, speed,