{"id":14957271,"url":"https://github.com/vercel/react-transition-progress","last_synced_at":"2025-04-13T08:26:17.460Z","repository":{"id":231105673,"uuid":"779288128","full_name":"vercel/react-transition-progress","owner":"vercel","description":"Show a progress bar while React Transitions run","archived":false,"fork":false,"pushed_at":"2024-10-31T11:04:10.000Z","size":157,"stargazers_count":220,"open_issues_count":11,"forks_count":18,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-13T08:26:10.701Z","etag":null,"topics":["react","reactjs"],"latest_commit_sha":null,"homepage":"https://react-transition-progress.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vercel.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-29T13:33:46.000Z","updated_at":"2025-04-07T12:38:01.000Z","dependencies_parsed_at":"2024-04-02T13:45:18.528Z","dependency_job_id":"6f7a5819-8076-4edd-9367-5fc66cbd907e","html_url":"https://github.com/vercel/react-transition-progress","commit_stats":{"total_commits":32,"total_committers":4,"mean_commits":8.0,"dds":0.1875,"last_synced_commit":"cbbf1ee085523910b5f39b7a022b047117b7d796"},"previous_names":["timneutkens/react-transition-progress"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Freact-transition-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Freact-transition-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Freact-transition-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Freact-transition-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vercel","download_url":"https://codeload.github.com/vercel/react-transition-progress/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248682520,"owners_count":21144820,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","reactjs"],"created_at":"2024-09-24T13:14:31.213Z","updated_at":"2025-04-13T08:26:17.431Z","avatar_url":"https://github.com/vercel.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-transition-progress\n\nShow a progress bar while a React transition is in progress.\n\n[Visit the demo](https://react-transition-progress.vercel.app/).\n\n## Installation\n\n```bash\nnpm install react-transition-progress framer-motion\n```\n\nThe main package `react-transition-progress` exports three APIs: `ProgressBarProvider`, `ProgressBar`, and `useProgress`.\n\n- `ProgressBarProvider` provides the state and context for `ProgressBar` and `useProgress`\n- `ProgressBar` is the displayed progressbar\n- `useProgress` is the way you start/finish the progressbar\n\nThere is also Next.js specific helper for `next/link` in `react-transition-progress/next`:\n\n- `Link` is a wrapper for `next/link` that is instrumented to show the `ProgressBar`\n\nFor example integrating into the Next.js App Router:\n\n```tsx\n// app/layout.tsx\nimport { ProgressBar, ProgressBarProvider } from \"react-transition-progress\";\n\nexport default function RootLayout({\n  children,\n}: Readonly\u003c{\n  children: React.ReactNode;\n}\u003e) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e\n        \u003cProgressBarProvider\u003e\n          {/* I.e. using Tailwind CSS to show the progress bar with custom styling */}\n          \u003cProgressBar className=\"fixed h-1 shadow-lg shadow-sky-500/20 bg-sky-500 top-0\" /\u003e\n          {children}\n        \u003c/ProgressBarProvider\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\nUsing `useProgress` to show the `ProgressBar` when the [React transition](https://react.dev/reference/react/useTransition#starttransition) runs:\n\n```tsx\n// components/my-component.tsx\n\"use client\";\nimport { useState, startTransition } from \"react\";\nimport { useProgress } from \"react-transition-progress\";\n\nexport default function MyComponent() {\n  const startProgress = useProgress();\n  const [count, setCount] = useState(0);\n  return (\n    \u003c\u003e\n      \u003ch1\u003eCurrent count: {count}\u003c/h1\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          startTransition(async () =\u003e {\n            startProgress();\n            // Introduces artificial slowdown\n            await new Promise((resolve) =\u003e setTimeout(resolve, 2000));\n            setCount((count) =\u003e count + 1);\n          });\n        }}\n      \u003e\n        Trigger transition\n      \u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nYou can also create nested progress bars by adding `ProgressBarProvider` and `ProgressBar` deeper in the React tree:\n\n```tsx\nimport MyComponent from \"@/components/my-component\";\nimport { ProgressBar, ProgressBarProvider } from \"react-transition-progress\";\nimport { Link } from \"react-transition-progress/next\";\n\nexport default function Home() {\n  return (\n    \u003c\u003e\n      \u003cdiv className=\"m-10\"\u003e\n        \u003cProgressBarProvider\u003e\n          \u003ch2 className=\"mb-2 pb-1 text-2xl font-semibold relative\"\u003e\n            My Title\n            {/* I.e. using Tailwind CSS to show the progress bar with custom styling */}\n            \u003cProgressBar className=\"absolute h-1 shadow-lg shadow-sky-500/20 bg-sky-500 bottom-0\" /\u003e\n          \u003c/h2\u003e\n          \u003cMyComponent /\u003e\n        \u003c/ProgressBarProvider\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nUsing Next.js helper for `Link` to show the progress bar for `next/link`:\n\n```tsx\n// app/page.tsx\nimport { Link } from \"react-transition-progress/next\";\n\nexport default function Home() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eHome\u003c/h1\u003e\n      \u003cLink href=\"/about\"\u003eGo to about page\u003c/Link\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Contributing\n\nSee the [Contributing Guide](./contributing.md).\n\n## Authors\n\n- Tim Neutkens ([@timneutkens](https://twitter.com/timneutkens))\n- Sam Selikoff ([@samselikoff](https://twitter.com/samselikoff))\n- Ryan Toronto ([@ryantotweets](https://twitter.com/ryantotweets))\n\n### History\n\nThis package is an improved version of [the demo](https://buildui.com/posts/global-progress-in-nextjs) shown in Sam \u0026 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).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvercel%2Freact-transition-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvercel%2Freact-transition-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvercel%2Freact-transition-progress/lists"}