Show a progress bar while a React transition is in progress.
npm install react-transition-progress framer-motionThe main package react-transition-progress exports three APIs: ProgressBarProvider, ProgressBar, and useProgress.
ProgressBarProviderprovides the state and context forProgressBaranduseProgressProgressBaris the displayed progressbaruseProgressis the way you start/finish the progressbar
There is also Next.js specific helper for next/link in react-transition-progress/next:
Linkis a wrapper fornext/linkthat is instrumented to show theProgressBar
For example integrating into the Next.js App Router:
// app/layout.tsximport{ProgressBar,ProgressBarProvider}from"react-transition-progress";exportdefaultfunctionRootLayout({
children,}: Readonly<{children: React.ReactNode;}>){return(<htmllang="en"><body><ProgressBarProvider>{/* I.e. using Tailwind CSS to show the progress bar with custom styling */}<ProgressBarclassName="fixed h-1 shadow-lg shadow-sky-500/20 bg-sky-500 top-0"/>{children}</ProgressBarProvider></body></html>);}Using useProgress to show the ProgressBar when the React transition runs:
// components/my-component.tsx"use client";import{useState,startTransition}from"react";import{useProgress}from"react-transition-progress";exportdefaultfunctionMyComponent(){conststartProgress=useProgress();const[count,setCount]=useState(0);return(<><h1>Current count: {count}</h1><buttononClick={()=>{startTransition(async()=>{startProgress();// Introduces artificial slowdownawaitnewPromise((resolve)=>setTimeout(resolve,2000));setCount((count)=>count+1);});}}>
Trigger transition
</button></>);}You can also create nested progress bars by adding ProgressBarProvider and ProgressBar deeper in the React tree:
importMyComponentfrom"@/components/my-component";import{ProgressBar,ProgressBarProvider}from"react-transition-progress";import{Link}from"react-transition-progress/next";exportdefaultfunctionHome(){return(<><divclassName="m-10"><ProgressBarProvider><h2className="mb-2 pb-1 text-2xl font-semibold relative">
My Title
{/* I.e. using Tailwind CSS to show the progress bar with custom styling */}<ProgressBarclassName="absolute h-1 shadow-lg shadow-sky-500/20 bg-sky-500 bottom-0"/></h2><MyComponent/></ProgressBarProvider></div></>);}Using Next.js helper for Link to show the progress bar for next/link:
// app/page.tsximport{Link}from"react-transition-progress/next";exportdefaultfunctionHome(){return(<div><h1>Home</h1><Linkhref="/about">Go to about page</Link></div>);}See the Contributing Guide.
- Tim Neutkens (@timneutkens)
- Sam Selikoff (@samselikoff)
- Ryan Toronto (@ryantotweets)
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.