{"id":13479093,"url":"https://github.com/ndungtse/next13-progressbar","last_synced_at":"2025-03-27T09:30:36.576Z","repository":{"id":177319557,"uuid":"659837726","full_name":"ndungtse/next13-progressbar","owner":"ndungtse","description":"A simple Next.js progressbar component using NProgress with support of next.js \u003e=13 app dir.","archived":false,"fork":false,"pushed_at":"2024-10-16T13:51:26.000Z","size":473,"stargazers_count":93,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-18T13:30:02.561Z","etag":null,"topics":["app-router-nextjs","appdir","nextjs13","nprogress","toploader"],"latest_commit_sha":null,"homepage":"https://next13-progressbar.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/ndungtse.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"custom":["https://www.buymeacoffee.com/ndungutse","https://www.patreon.com/user?u=83557555"],"liberapay":"ndungutse","ko_fi":"ndungutsecharles","open_collective":"ndungutse-charles","github":"NdungutseCharles103","patreon":"ndungutsecharles","tidelift":null,"community_bridge":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null}},"created_at":"2023-06-28T17:06:55.000Z","updated_at":"2024-10-16T13:51:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"1d0708fe-0e3e-45df-9411-3faac8cf316a","html_url":"https://github.com/ndungtse/next13-progressbar","commit_stats":null,"previous_names":["ndungutsecharles103/next13-progressbar","ndicari/next13-progressbar","ndungtse/next13-progressbar"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndungtse%2Fnext13-progressbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndungtse%2Fnext13-progressbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndungtse%2Fnext13-progressbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndungtse%2Fnext13-progressbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ndungtse","download_url":"https://codeload.github.com/ndungtse/next13-progressbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222222193,"owners_count":16951399,"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":["app-router-nextjs","appdir","nextjs13","nprogress","toploader"],"created_at":"2024-07-31T16:02:09.238Z","updated_at":"2024-10-30T12:31:31.867Z","avatar_url":"https://github.com/ndungtse.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/ndungutse","https://www.patreon.com/user?u=83557555","https://liberapay.com/ndungutse","https://ko-fi.com/ndungutsecharles","https://opencollective.com/ndungutse-charles","https://github.com/sponsors/NdungutseCharles103","https://patreon.com/ndungutsecharles"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Next.js 13 Progressbar\n\nA simple Next.js progressbar component using [NProgress](http://ricostacruz.com/nprogress/) with support of next.js 13 and later app dir.\n\n\u003c!-- \u003e [I've created this Blog to help you create your own progressbar](https://gosink.in/next-js-make-your-own-progress-bar-indicator-component-easily/) --\u003e\n\n**Demo**: [https://next13-progressbar.vercel.app/](https://next13-progressbar.vercel.app/)\n\n## How to install?\n\n```bash\nnpm i next13-progressbar\n```\n\n## How to use?\n\n⚠️ **_Note_** : This docs are for versions `\u003e=1.0.0` only. For the older versions check tags versions tree's Readme of the older version.\n\nAfter installing the package, create `providers.tsx` file in app directory to handle contexts and mark it `use client`. see [contexts in app dir](https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers) and import `Next13ProgressBar;\n\n```jsx\n'use client';\nimport React from 'react';\nimport { Next13ProgressBar } from 'next13-progressbar';\n\nconst Providers = ({ children }: { children: React.ReactNode }) =\u003e {\n  return (\n    \u003c\u003e\n      {children}\n      \u003cNext13ProgressBar height=\"4px\" color=\"#0A2FFF\" options={{ showSpinner: true }} showOnShallow /\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default Providers;\n```\n\nWrap your providers in `layout.tsx/js`\n\n```jsx\nimport Providers from './providers';\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e\n        \u003cProviders\u003e{children}\u003c/Providers\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\nBy default all `a` tags are handled by `next/link` so you don't need to do anything.\n\n```jsx\nimport Link from 'next/link';\nimport { useRouter } from 'next13-progressbar';\n\nconst NavBar = () =\u003e {\n  const router = useRouter();\n  return (\n    \u003cdiv className=\"navbar\"\u003e\n      \u003cLink href={'/'}\u003eHome\u003c/Link\u003e\n      \u003cLink href={'/about'}\u003eAbout\u003c/Link\u003e\n      \u003cLink href={'/contact'}\u003eContact\u003c/Link\u003e\n      \u003cbutton onClick={() =\u003e router.push('/button-link')}\u003eButtonLink\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### Default Config\n\nIf no props are passed to `\u003cNext13ProgressBar /\u003e`, below is the default configuration applied.\n\n```jsx\n\u003cNext13ProgressBar color=\"#29D\" startPosition={0.3} stopDelayMs={200} height={3} showOnShallow={true} /\u003e\n```\n\n- `color`: to change the default color of progressbar. You can also use `rgb(,,)` or `rgba(,,,)`.\n- `startPosition`: to set the default starting position : `0.3 = 30%`.\n- `delay`: time for delay to start progressbar in `ms`.\n- `stopDelayMs`: time for delay to stop progressbar in `ms`.\n- `height`: height of progressbar in `px`.\n- `showOnShallow`: You can choose whether you want the progressbar to be displayed if you're using shallow routing. It takes a boolean. Learn more about shallow routing [in Next.js docs](https://nextjs.org/docs/routing/shallow-routing).\n\n### Advanced Config\n\n#### Adding nonce\n\nWe use internal css in this package. If you are using csp, you can add nonce to the `\u003cstyle\u003e` tag by providing `nonce` prop to `\u003cNProvider /\u003e` component.\n\n```jsx\n\u003cNext13ProgressBar nonce=\"my-nonce\" /\u003e\n```\n\n#### Custom CSS\n\nYou can pass custom css to the progressbar by using `style` prop.\n\n```jsx\n\u003cNext13ProgressBar\n  style={`\n    #nprogress {\n      pointer-events: none;\n    }\n  `}\n/\u003e\n```\n\n### Older Versions\n\nCheck Branches with `v` prefix for older docs of the package.\nIf not found check tags versions tree's Readme of the older version.\n\n## Contributing\n\nAny Contribution of any kind are appreciated. You can start by forking this repository and make your changes then submit a pull request\n\n## Author\n\n- [Ndungutse Charles](https://github.com/NdungutseCharles103)\n\n## Support\n\nYour support matters. It pushes me to do more Open Source contributions and give back to the community.\n\u003ca href=\"https://www.buymeacoffee.com/ndungutse\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" height=\"41\" width=\"174\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndungtse%2Fnext13-progressbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fndungtse%2Fnext13-progressbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndungtse%2Fnext13-progressbar/lists"}