# react-transition-progress
**Repository Path**: hujiapeng/react-transition-progress
## Basic Information
- **Project Name**: react-transition-progress
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: floguo/dsn-1050-app-router-progress-bar-playground
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-29
- **Last Updated**: 2025-06-29
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# react-transition-progress
Show a progress bar while a React transition is in progress.
[Visit the demo](https://react-transition-progress.vercel.app/).
## 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](https://react.dev/reference/react/useTransition#starttransition) 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}
);
}
```
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 (
<>
My Title
{/* I.e. using Tailwind CSS to show the progress bar with custom styling */}
);
}
```
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 (
Home
Go to about page
);
}
```
## Contributing
See the [Contributing Guide](./contributing.md).
## Authors
- Tim Neutkens ([@timneutkens](https://twitter.com/timneutkens))
- Sam Selikoff ([@samselikoff](https://twitter.com/samselikoff))
- Ryan Toronto ([@ryantotweets](https://twitter.com/ryantotweets))
### History
This package is an improved version of [the demo](https://buildui.com/posts/global-progress-in-nextjs) shown in Sam & Ryan's [article on Build UI](https://buildui.com/posts/global-progress-in-nextjs). It leverages [React's `useOptimistic`](https://react.dev/reference/react/useOptimistic) to track [React Transitions](https://react.dev/reference/react/useTransition).