0.1.1 • Published 5 months ago
remix-toploader v0.1.1
Remix / React Router TopLoader
- A Remix and React Router Top Loading bar Component heavily inspired by Next.js TopLoader. Based on NProgress
:exclamation: This is my first package. Contributions are welcomed 👍
Install
using npm:
npm install remix-toploaderusing yarn:
yarn add remix-toploaderusing pnpm:
pnpm add remix-toploaderUsage
import using:
// in Remix v2
import RemixTopLoader from "remix-toploader";
// or
import { RemixTopLoader } from "remix-toploader";
// in React Router v7
import { RouterTopLoader } from "remix-toploader";Navigate to root.tsx of your app and add <RemixTopLoader /> to the <body> tag.
export function Layout({ children }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{/* in Remix v2 */}
<RemixTopLoader />
{/* in React Router v7 */}
<RouterTopLoader />
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}Default Configuration
Default styles and configuration without any props passed
<RemixTopLoader
color="#2299DD"
initialPosition={0.08}
crawlSpeed={200}
height={3}
crawl={true}
showSpinner={true}
easing="ease"
speed={200}
shadow="0 0 10px #2299DD,0 0 5px #2299DD"
template='<div class="bar" role="bar"><div class="peg"></div></div>
<div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
zIndex={1600}
showAtBottom={false}
/>color: to change the default color of TopLoader.initialPosition: to change initial position for the TopLoader in percentage, :0.08 = 8%.crawlSpeed: increment delay speed inms.speed: animation speed for the TopLoader inmseasing: animation settings using easing (a CSS easing string).height: height of TopLoader inpx.crawl: auto incrementing behavior for the TopLoader.showSpinner: to show spinner or not.shadow: a smooth shadow for the TopLoader. (set tofalseto disable it)template: to include custom HTML attributes for the TopLoader.zIndex: defines zIndex for the TopLoader.showAtBottom: To show the TopLoader at bottom. (increase height for the TopLoader to ensure it's visibility at the mobile devices)
RemixTopLoaderProps
| Name | Type | Default Value |
|---|---|---|
color | string | "#2299DD" |
initialPosition | number | 0.08 |
crawlSpeed | number | 200 |
height | number | 3 |
crawl | boolean | true |
showSpinner | boolean | true |
easing | string | "ease" |
speed | number | 200 |
shadow | string \| false | "0 0 10px #2299DD,0 0 5px #2299DD" |
template | string | "<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>" |
zIndex | number | 1600 |
showAtBottom | boolean | false |
showForHashAnchor | boolean | true |