{"repo":"vercel/react-transition-progress","free":true,"listed":false,"github":"https://github.com/vercel/react-transition-progress","clone":"git clone https://github.com/vercel/react-transition-progress.git","description":"Show a progress bar while React Transitions run","language":"TypeScript","stars":333,"topics":["react","reactjs"],"license":"MIT","category":"api-integrations-sdks","readme_excerpt":"react-transition-progress Show a progress bar while a React transition is in progress. Visit the demo. Installation 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: Using useProgress to show the ProgressBar when the React transition runs: You can also create nested progress bars by adding ProgressBarProvider and ProgressBar deeper in the React tree: Using Next.js helper for Link to show the progress bar for next/link : Contributing See the Contributing Guide. Authors - Tim Neutkens (@timneutkens) - Sam Selikoff (@samselikoff) - Ryan Toronto (@ryantotweets) History 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.","default_branch":null,"files":null,"tree":[],"storefront":"/r/vercel","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/vercel/react-transition-progress/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}