react-top-progress 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -52,22 +52,26 @@ export default function RootLayout({ children }) {
|
|
|
52
52
|
|
|
53
53
|
You can trigger the loader from anywhere in your codebase by importing the functions globally, or via a React `ref` assigned to `<TopProgress ref={myRef} />`.
|
|
54
54
|
|
|
55
|
-
| Method
|
|
56
|
-
|
|
|
57
|
-
| `start(loaderType?)`
|
|
58
|
-
| `continuousStart(startingValue?, refreshRate?)` | `number`, `number`
|
|
59
|
-
| `staticStart(startingValue?)`
|
|
60
|
-
| `complete()` / `finishProgress()`
|
|
61
|
-
| `increase(value)`
|
|
62
|
-
| `decrease(value)`
|
|
63
|
-
| `setProgress(value)`
|
|
64
|
-
| `getProgress()`
|
|
65
|
-
| `withProgress(promise)
|
|
55
|
+
| Method | Parameters | Description |
|
|
56
|
+
| ----------------------------------------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------- |
|
|
57
|
+
| `start(loaderType?)` | `"continuous" \| "static"` | Starts the loading indicator. Default is continuous. |
|
|
58
|
+
| `continuousStart(startingValue?, refreshRate?)` | `number`, `number` | Starts with a random value (20-30), then slowly ticks up (2-10) repetitively. Reaches max 90%. |
|
|
59
|
+
| `staticStart(startingValue?)` | `number` | Starts the loader with a random static value between 30-50, waiting for completion. |
|
|
60
|
+
| `complete()` / `finishProgress()` | | Instantly pushes the indicator to 100% and gracefully fades it out. |
|
|
61
|
+
| `increase(value)` | `number` | Manually increments the loader by a specific amount. |
|
|
62
|
+
| `decrease(value)` | `number` | Manually decrements the loader by a specific amount. |
|
|
63
|
+
| `setProgress(value)` | `number` | Hardsets to a specific progress percentage. |
|
|
64
|
+
| `getProgress()` | | Returns the current progress percentage (0 - 100). |
|
|
65
|
+
| `withProgress(promise)` | `Promise<T>` | Wraps an asynchronous action. `startProgress()` executes automatically before and completes automatically afterward. |
|
|
66
66
|
|
|
67
67
|
### Global Usage Example
|
|
68
68
|
|
|
69
69
|
```tsx
|
|
70
|
-
import {
|
|
70
|
+
import {
|
|
71
|
+
startProgress,
|
|
72
|
+
finishProgress,
|
|
73
|
+
withProgress,
|
|
74
|
+
} from "react-top-progress";
|
|
71
75
|
|
|
72
76
|
async function fetchData() {
|
|
73
77
|
startProgress("continuous");
|
|
@@ -86,25 +90,29 @@ const loadProfile = () => withProgress(fetch("/api/profile"));
|
|
|
86
90
|
|
|
87
91
|
You can customize `<TopProgress />` passing any of the following props:
|
|
88
92
|
|
|
89
|
-
| Property
|
|
90
|
-
|
|
|
91
|
-
| `progress`
|
|
92
|
-
| `color`
|
|
93
|
-
| `height`
|
|
94
|
-
| `shadow`
|
|
95
|
-
| `background`
|
|
96
|
-
| `transitionTime`
|
|
97
|
-
| `loaderSpeed`
|
|
98
|
-
| `waitingTime`
|
|
99
|
-
| `style`
|
|
100
|
-
| `className`
|
|
101
|
-
| `containerStyle`
|
|
102
|
-
| `containerClassName` | `string`
|
|
103
|
-
| `onLoaderFinished`
|
|
93
|
+
| Property | Type | Default | Description |
|
|
94
|
+
| -------------------- | --------------- | --------------- | ------------------------------------------------------------------------------------------------- |
|
|
95
|
+
| `progress` | `number` | | Hardset the progress (0-100) if you want to bypass the internal store and control state yourself. |
|
|
96
|
+
| `color` | `string` | `"red"` | Background color of the bar. Accepts `linear-gradient(...)` or hex codes. |
|
|
97
|
+
| `height` | `number` | `2` | Height of the progress bar in pixels. |
|
|
98
|
+
| `shadow` | `boolean` | `true` | Appends a glorious trailing drop-glow peg matching the bar's color tracking its head. |
|
|
99
|
+
| `background` | `string` | `"transparent"` | Fills the container div's background layer under the progress element. |
|
|
100
|
+
| `transitionTime` | `number` | `300` | Fade transition time (ms) for the fade-out completion sequence. |
|
|
101
|
+
| `loaderSpeed` | `number` | `500` | Loader width transition speed (ms). |
|
|
102
|
+
| `waitingTime` | `number` | `1000` | The delay time (ms) loader waits at 100% width before fading entirely out. |
|
|
103
|
+
| `style` | `CSSProperties` | | Inject custom JSX styles directly onto the loader element. |
|
|
104
|
+
| `className` | `string` | | Apply a specific custom CSS class to the loader element. |
|
|
105
|
+
| `containerStyle` | `CSSProperties` | | Configure inline styles for the fixed `<div />` wrapper container. |
|
|
106
|
+
| `containerClassName` | `string` | | Custom CSS class applied onto the wrapper container. |
|
|
107
|
+
| `onLoaderFinished` | `() => void` | | A callback function executing precisely when the loader fully hits 100% max width. |
|
|
104
108
|
|
|
105
109
|
## Credits
|
|
106
110
|
|
|
107
|
-
Inspired by
|
|
111
|
+
Designed for the modern web. Inspired by the classic `nprogress` and Next.js' `nextjs-toploader`. Ideal when you need explicit control without relying solely on framework routing events.
|
|
112
|
+
|
|
113
|
+
Built with ❤️ by **[Harry Mate](https://github.com/harrymate22)**.
|
|
114
|
+
🌟 If you find this library helpful, consider dropping a **Star** on GitHub and **[following me (@harrymate22)](https://github.com/harrymate22)** for more open-source tools!
|
|
108
115
|
|
|
109
116
|
## License
|
|
110
|
-
|
|
117
|
+
|
|
118
|
+
MIT © [harrymate22](https://github.com/harrymate22)
|