react-top-progress
Advanced tools
+20
-5
| { | ||
| "name": "react-top-progress", | ||
| "version": "1.0.3", | ||
| "version": "1.0.4", | ||
| "description": "A lightweight modern top loading progress bar for React", | ||
@@ -14,6 +14,21 @@ "main": "dist/index.js", | ||
| "react", | ||
| "progress", | ||
| "loader", | ||
| "top-loader", | ||
| "route-progress" | ||
| "nextjs", | ||
| "nextjs loader", | ||
| "ssr progress bar", | ||
| "top loading bar", | ||
| "route progress", | ||
| "react progress bar", | ||
| "nextjs app router loader", | ||
| "lightweight loader", | ||
| "modern progress bar", | ||
| "nprogress", | ||
| "vite loader", | ||
| "react top loading bar", | ||
| "loading bar", | ||
| "page transition", | ||
| "progress indicator", | ||
| "react-router loader", | ||
| "remix loader", | ||
| "next14 loader", | ||
| "next15 loader" | ||
| ], | ||
@@ -20,0 +35,0 @@ "author": "Harry Mate", |
+40
-1
@@ -18,2 +18,10 @@ # react-top-progress | ||
| ## 🚀 Why react-top-progress? | ||
| - **SSR & App Router Safe**: Fully compatible with Next.js SSR & App Router natively | ||
| - **Framework Agnostic**: Works perfectly in React, Vite, CRA, Remix | ||
| - **0 Dependencies**: No weird transitive bloat | ||
| - **📦 Tiny Bundle Size**: ~1.8kb gzipped | ||
| - **Premium Aesthetics**: Smooth realistic loading animation with beautiful gradients & glows | ||
| ## Installation | ||
@@ -33,4 +41,24 @@ | ||
| ## Quick Start | ||
| ## Next.js Usage (App Router) | ||
| Because Next.js App Router removed native router events, you can manually construct a robust loader globally right in your `layout.tsx`. | ||
| ```tsx | ||
| "use client"; | ||
| import { TopProgress, startProgress, finishProgress } from "react-top-progress"; | ||
| export default function Layout({ children }) { | ||
| return ( | ||
| <> | ||
| <TopProgress /> | ||
| {/* Your Top Nav, Sidebar, etc. */} | ||
| {children} | ||
| </> | ||
| ); | ||
| } | ||
| ``` | ||
| ## Standard Quick Start | ||
| At the top level of your application (like Next.js `app/layout.jsx` or Vite `src/App.jsx`), render the component. | ||
@@ -112,2 +140,13 @@ Works flawlessly in both **JSX** and **TSX**! | ||
| ## Compared to Alternatives | ||
| Developers need to know why to switch. Here is the breakdown: | ||
| | Library | Dependencies | SSR Safe | Bundle Size | | ||
| | ----------------------- | ---------------------- | -------- | ----------------- | | ||
| | `nprogress` | Old jQuery style logic | No | Larger | | ||
| | `nextjs-toploader` | Next-specific only | Yes | Medium | | ||
| | `react-top-loading-bar` | React mostly | Some | Medium | | ||
| | **react-top-progress** | **0 dependencies** | **Yes** | **Tiny (~1.8kb)** | | ||
| ## Credits | ||
@@ -114,0 +153,0 @@ |
28707
6.79%159
32.5%