{"id":20980499,"url":"https://github.com/hyperjumptech/react-next-pathname","last_synced_at":"2026-02-06T09:10:22.731Z","repository":{"id":244381537,"uuid":"815074919","full_name":"hyperjumptech/react-next-pathname","owner":"hyperjumptech","description":"Instantly tracks the next pathname on link click","archived":false,"fork":false,"pushed_at":"2024-07-17T08:08:37.000Z","size":440,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-17T19:35:04.832Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/hyperjumptech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"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}},"created_at":"2024-06-14T09:46:54.000Z","updated_at":"2024-07-17T08:08:21.000Z","dependencies_parsed_at":"2024-07-08T10:14:32.823Z","dependency_job_id":"551d5fe6-ebb0-4260-add4-a1b5f7b13213","html_url":"https://github.com/hyperjumptech/react-next-pathname","commit_stats":null,"previous_names":["hyperjumptech/react-next-pathname"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/hyperjumptech/react-next-pathname","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperjumptech%2Freact-next-pathname","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperjumptech%2Freact-next-pathname/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperjumptech%2Freact-next-pathname/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperjumptech%2Freact-next-pathname/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyperjumptech","download_url":"https://codeload.github.com/hyperjumptech/react-next-pathname/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperjumptech%2Freact-next-pathname/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267576436,"owners_count":24110315,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-19T05:28:54.134Z","updated_at":"2026-02-06T09:10:22.700Z","avatar_url":"https://github.com/hyperjumptech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# About\n\n![Minified size](https://img.shields.io/bundlephobia/min/@hyperjumptech/react-next-pathname) ![Monthly download](https://img.shields.io/npm/dm/@hyperjumptech/react-next-pathname)\n\n`@hyperjumptech/react-next-pathname` is a helper tool designed to enhance the user experience in React applications by improving the responsiveness and feedback when navigating between pages. It ensures that the active state of links in components like sidebars is updated immediately upon clicking, even if the new page is slow to load.\n\n## Problem\n\nWhen a user clicks a link, the typical implementation updates the link's active state based on the current pathname, which only changes after the new page loads. This delay can confuse users, making them think that their click did not register. For example:\n\n```tsx\nconst isPathActive = (pathname: string) =\u003e {\n  return pathname === window.location.pathname;\n};\n\nconst Sidebar = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      {[\n        { pathname: \"/\", title: \"Home\" },\n        { pathname: \"/about\", title: \"About\" },\n        { pathname: \"/contact\", title: \"Contact\" },\n      ].map(({ pathname, title }) =\u003e (\n        \u003ca\n          key={pathname}\n          href={pathname}\n          className={`${isPathActive(pathname) ? \"active\" : \"\"}`}\n        \u003e\n          {title}\n        \u003c/a\u003e\n      ))}\n    \u003c/div\u003e\n  );\n};\n```\n\n## Solution\n\n`@hyperjumptech/react-next-pathname` solves this problem by providing the next pathname immediately when a link is clicked, without waiting for the new page to load. This ensures that the active state is updated right away, providing immediate feedback to the user.\n\n## Installation\n\nTo install `@hyperjumptech/react-next-pathname`, run one of the following commands:\n\n**NPM**\n\n```\nnpm install @hyperjumptech/react-next-pathname\n```\n\n**Yarn**\n\n```\nyarn add @hyperjumptech/react-next-pathname\n```\n\n**pnpm**\n\n```\npnpm add @hyperjumptech/react-next-pathname\n```\n\n**bun**\n\n```\nbun add @hyperjumptech/react-next-pathname\n```\n\n## Usage\n\nFirst, wrap your application with the `NextPathnameProvider` to provide the context to all components:\n\n```tsx\nimport React from \"react\";\nimport { NextPathnameProvider } from \"@hyperjumptech/react-next-pathname\";\n\nfunction App({ children }) {\n  return \u003cNextPathnameProvider\u003e{children}\u003c/NextPathnameProvider\u003e;\n}\n\nexport default App;\n```\n\nThen, use the `useNextPathname` hook to access the next pathname in your component. Let's take the previous example and use `@hyperjumptech/react-next-pathname`:\n\n```tsx\nimport { useNextPathname } from \"@hyperjumptech/react-next-pathname\";\n\nconst isPathActive = (pathname: string, nextPathname: string) =\u003e {\n  return pathname === nextPathname;\n};\n\nconst Sidebar = () =\u003e {\n  const { nextPathname } = useNextPathname();\n  return (\n    \u003cdiv\u003e\n      {[\n        { pathname: \"/\", title: \"Home\" },\n        { pathname: \"/about\", title: \"About\" },\n        { pathname: \"/contact\", title: \"Contact\" },\n      ].map(({ pathname, title }) =\u003e (\n        \u003ca\n          key={pathname}\n          href={pathname}\n          className={`${isPathActive(pathname, nextPathname) ? \"active\" : \"\"}`}\n        \u003e\n          {title}\n        \u003c/a\u003e\n      ))}\n    \u003c/div\u003e\n  );\n};\n```\n\n## Next.js Support\n\nCurrently, the `@hyperjumptech/react-next-pathname-nextjs` package only supports the Page Router. If you are using the App Router, you can use the `@hyperjumptech/react-next-pathname` package. However, please note that it is not fully optimized for the App Router.\n\n## Development Guide\n\nIf this is the first time you have cloned the repository, run the following commands:\n\n```bash\nnpm install\nnpm run build:packages\n```\n\nIf you want to run the example, navigate to the example app directory and run the development server:\n\n```bash\ncd apps/example-nextjs\nnpm run dev\n```\n\nEvery time you make changes in packages and want to see them in the example app, you need to run:\n\n```bash\nnpm run build:packages\n```\n\n## License\n\n[MIT License](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperjumptech%2Freact-next-pathname","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyperjumptech%2Freact-next-pathname","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperjumptech%2Freact-next-pathname/lists"}