New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details
Socket
Book a DemoSign in
Socket

react-top-progress

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-top-progress - npm Package Compare versions

Comparing version
1.0.3
to
1.0.4
+20
-5
package.json
{
"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 @@