q-top-progress-bar
v1.0.2
Published
A slim progress bar for React Router navigations
Downloads
47
Maintainers
raihan004Readme
q-top-progress-bar
A slim, lightweight progress bar that appears at the very top of the viewport whenever a React Router navigation is in flight. Inspired by Shopify Admin and YouTube.
Installation
npm install q-top-progress-barNote: react, react-dom, and react-router are required peer dependencies.
Usage
Standard React Router / Remix App
Simply drop <TopProgressBar /> once in your root layout (e.g., app/root.tsx or wherever your router is provided).
import { TopProgressBar } from "q-top-progress-bar";
export default function RootLayout() {
return (
<html>
<body>
{/* Render it anywhere in your tree */}
<TopProgressBar />
<Outlet />
</body>
</html>
);
}Shopify Embedded App (Remix / React Router Template)
For Shopify Embedded Apps, render the progress bar inside the <AppProvider> in your authenticated layout route (typically app/routes/app.tsx). This ensures it matches the Shopify admin lifecycle:
import { AppProvider } from "@shopify/shopify-app-react-router/react";
import { TopProgressBar } from "q-top-progress-bar";
export default function AppLayout() {
return (
<AppProvider embedded apiKey={apiKey}>
<TopProgressBar />
<s-app-nav>
<s-link href="/app">Dashboard</s-link>
<s-link href="/app/settings">Settings</s-link>
</s-app-nav>
<Outlet />
</AppProvider>
);
}Customization
You can customize the appearance using props:
Gradient (Default)
By default, the progress bar uses a green gradient ["#008060", "#00c28a"]. You can pass your own colors:
<TopProgressBar gradient={["#ff0000", "#ff7f00"]} />Solid Color
If you prefer a solid color, use the color prop. This will override the gradient.
<TopProgressBar color="#005bd3" />Advanced Styling
You can also override the boxShadow and height:
<TopProgressBar
color="#333"
height="4px"
boxShadow="0 2px 4px rgba(0,0,0,0.2)"
/>Props API
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| gradient | [string, string] | ["#008060", "#00c28a"] | A tuple of two color strings used to generate a linear gradient. |
| color | string | undefined | A solid background color. If provided, overrides gradient. |
| height | string | "3px" | The height of the progress bar. |
| boxShadow | string | "0 1px 8px rgba(0, 128, 96, 0.5)" | CSS box-shadow string. If color is provided and boxShadow is not, it defaults to "none". |