Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vercel/react-transition-progress
Show a progress bar while React Transitions run
https://github.com/vercel/react-transition-progress
react reactjs
Last synced: 5 days ago
JSON representation
Show a progress bar while React Transitions run
- Host: GitHub
- URL: https://github.com/vercel/react-transition-progress
- Owner: vercel
- License: mit
- Created: 2024-03-29T13:33:46.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-07-28T10:35:17.000Z (5 months ago)
- Last Synced: 2024-10-29T17:18:17.929Z (2 months ago)
- Topics: react, reactjs
- Language: TypeScript
- Homepage: https://react-transition-progress.vercel.app
- Size: 151 KB
- Stars: 167
- Watchers: 3
- Forks: 17
- Open Issues: 9
-
Metadata Files:
- Readme: readme.md
- Contributing: contributing.md
- License: license.md
Awesome Lists containing this project
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}
{
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 (
<>
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).