react-page-transition-bar

Inspired by react-top-loading-bar, rewritten to fix Hydration Errors

Install

with NPM

``sh
npm install react-page-transition-bar
`

with PNPM (recommended)

`sh
pnpm add react-page-transition-bar
`

Usage

$3

`tsx

import {LoadingBar} from "react-page-transition-bar"

export const App() {
const ref = useRef<{
complete: () => void;
staticStart: () => void;
getProgress: () => number;
continuousStart: () => void;
} | null>(null);

// Call on start of page load
ref.current.continousStart();

// Call on page load completion
ref.current.complete();

return (


);
}

`

$3

You may also pass 2 hex codes as an array to have the bar be shown as a linear gradient

`tsx
import {LoadingBar} from "react-page-transition-bar"

export const App() {
const ref = useRef<{
complete: () => void;
staticStart: () => void;
getProgress: () => number;
continuousStart: () => void;
} | null>(null);

// Call on start of page load
ref.current.continousStart();

// Call on page load completion
ref.current.complete();

return (



);
`

Examples

$3

`tsx
// Remix & React
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useNavigation
} from "@remix-run/react";
import { ReactNode, useEffect, useRef } from "react";

import {LoadingBar} from "react-page-transition-bar"

export const Layout = ({children}: ReactNode) => {
// Utils
const transition = useNavigate();
const ref = useRef<{
complete: () => void;
staticStart: () => void;
getProgress: () => number;
continuousStart: () => void;
} | null>(null);

useEffect(() => {
if (transition.state === "loading" && ref.current) {
ref.current.continuousStart();
} else if (transition.state === "idle" && ref.current) {
ref.current.complete();
}
}, [transition.state]);

return (









{children}




);
};

export default function App() {
return
};

``