react-transition-progress

Show a progress bar while a React transition is in progress.

Visit the demo.

Installation

``bash
npm install react-transition-progress framer-motion
`

The main package react-transition-progress exports three APIs: ProgressBarProvider, ProgressBar, and useProgress.

- ProgressBarProvider provides the state and context for ProgressBar and useProgress
- ProgressBar is the displayed progressbar
- useProgress is the way you start/finish the progressbar

There is also Next.js specific helper for next/link in react-transition-progress/next:

- Link is a wrapper for next/link that is instrumented to show the ProgressBar

For example integrating into the Next.js App Router:

`tsx
// app/layout.tsx
import { ProgressBar, ProgressBarProvider } from "react-transition-progress";

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (



{/ I.e. using Tailwind CSS to show the progress bar with custom styling /}

{children}



);
}
`

Using useProgress to show the ProgressBar when the React transition runs:

`tsx
// components/my-component.tsx
"use client";
import { useState, startTransition } from "react";
import { useProgress } from "react-transition-progress";

export default function MyComponent() {
const startProgress = useProgress();
const [count, setCount] = useState(0);
return (
<>


Current count: {count}


onClick={() => {
startTransition(async () => {
startProgress();
// Introduces artificial slowdown
await new Promise((resolve) => setTimeout(resolve, 2000));
setCount((count) => count + 1);
});
}}
>
Trigger transition


);
}
`

You can also create nested progress bars by adding ProgressBarProvider and ProgressBar deeper in the React tree:

`tsx
import MyComponent from "@/components/my-component";
import { ProgressBar, ProgressBarProvider } from "react-transition-progress";
import { Link } from "react-transition-progress/next";

export default function Home() {
return (
<>




);
}
`

Using Next.js helper for Link to show the progress bar for next/link:

`tsx
// app/page.tsx
import { Link } from "react-transition-progress/next";

export default function Home() {
return (



);
}
`

Contributing

See the Contributing Guide.

Authors

- Tim Neutkens (@timneutkens)
- Sam Selikoff (@samselikoff)
- Ryan Toronto (@ryantotweets)

$3

This package is an improved version of the demo shown in Sam & Ryan's article on Build UI. It leverages React's useOptimistic` to track React Transitions.