{"repo":"toomuchdesign/next-use-contextual-routing","free":true,"listed":false,"github":"https://github.com/toomuchdesign/next-use-contextual-routing","clone":"git clone https://github.com/toomuchdesign/next-use-contextual-routing.git","description":"Generate Next.js contextual routing / modal routes paths","language":"TypeScript","stars":119,"topics":["nextjs","routing","modal","hook"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"Next use contextual routing [![Build status][ci-badge]][ci] [![Test coverage report][coveralls-badge]][coveralls] [![Npm version][npm-badge]][npm] [![Bundle size][bundlephobia-badge]][bundlephobia] Intro React hook that generates round trip hrefs to enable [contextual routing][next-docs-contextual-routing] for [Next.js][next]. Take a look to the [demo 👈][demo]. With Next links With Next router Why? Contextual routing presents 2 challenges: - Persist a href string able to keep the initial page state consistent throughout the whole contextual navigation - Persist the url to return to when contextual routing is terminated Next use contextual routing abstracts these responsibilities as a React hook. It also works in statically exported apps and supports navigation with browsers' back button. API makeContextualHref The function returns the path to provide as href to start or keep alive contextual navigation. The generated path describes the state of the page to keep alive while contextual navigation is active. It optionally accepts an object describing extra parameters to append to contextual navigation href . returnHref The path to return to to close contextual navigation. Next.js versions support Next use contextual routing Next.js --------------------------- -------------- v2.2.0 v9.X - v12.X v3.0.0 v13.X v3.2.0 + v13.X - v14.X v4.0.0 + v15.X - v16.X Notes Naming Contextual routing pattern is also known as: - Modal route - [Route as modal][next-docs-contextual-routing] - [Snow","default_branch":null,"files":null,"tree":[],"storefront":"/r/toomuchdesign","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/toomuchdesign/next-use-contextual-routing/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."}