toomuchdesign / next-use-contextual-routing Goto Github PK
View Code? Open in Web Editor NEWGenerate Next.js contextual routing / modal routes paths
Home Page: https://toomuchdesign.github.io/next-use-contextual-routing
License: MIT License
Generate Next.js contextual routing / modal routes paths
Home Page: https://toomuchdesign.github.io/next-use-contextual-routing
License: MIT License
I have faced an issue related to scroll behaviour on Safari (14.1 version). When i use to
const openModal = () => router.push(makeContextualHref({ pathName: SAMPLE }), SAMPLE, { shallow: true })
for open modal, then scroll is not working on Safari.
Steps to reproduce the behavior:
Scroll is working properly on Safari.
do
npm i next-use-contextual-routing
get this error:
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^9.0.0 || ^10.0.0 || ^11.0.0" from [email protected]
Thank you so much for this library. You might enjoy the new features we'd added to Next.js ๐ Open to feedback.
https://nextjs.org/blog/next-13-3#parallel-routes-and-interception
I think, changing the page title based on the URL change will be good.
Hello guys, since I updated to Next 13.2.4 and next-use-contextual-routing from 2.3.0 to 3.0.0, I am getting this error every time I want to import the package import { useContextualRouting } from 'next-use-contextual-routing';
/node_modules/next-use-contextual-routing/dist/index.js:1
import { useCallback } from 'react';
SyntaxError: Cannot use import statement outside a module
packages.json
"dependencies": {
"@headlessui/react": "^1.7.13",
"@heroicons/react": "^2.0.16",
"@next/font": "13.1.1",
"@react-oauth/google": "^0.5.1",
"@types/node": "18.11.18",
"@types/react": "18.0.26",
"@types/react-dom": "18.0.10",
"axios": "^1.3.2",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
"js-cookie": "^3.0.1",
"next": "13.2.4",
"next-pwa": "^5.6.0",
"next-use-contextual-routing": "^3.0.0",
"nprogress": "^0.2.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"react-intersection-observer": "^9.4.1",
"react-toastify": "^9.1.1",
"react-twitter-embed": "^4.0.4",
"react-web-share": "^2.0.2",
"typescript": "4.9.4",
"zustand": "^4.3.6"
},
"devDependencies": {
"@tailwindcss/line-clamp": "^0.4.2",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.20",
"tailwindcss": "^3.2.4"
}
Any help ?
Hi author. First of all I am very appreciated to this repo. But please re-maintain this repo. it's still useful for pages/
dir, not just /app
dir.
Not really a bug, but the docs should say that we are importing useRouter from next/router
rather than next/link
The latest version on the NPM page is v2.3.0 but it looks as though there should be a v3.0.0 available based on the releases and the description of next@13 support in this repo's README.
Could you advise as to next steps?
I'm unsure if this should be a bug or a feature request, but I've been working on a project that could use nested contextual routes and I'm not sure the library supports it or, If I'm doing something wrong.
For example, lets imagine we're building a version of Pinterest. So a way of grouping different images into boards.
Imagine the scenario:
So you land on a user page. You click on on of the user boards and the modal changes from /user/some-user
to boards/2
. On this page you have a gallery of images.
At this point you can close this modal and you're back into the user page(user
->board
->ESC
=user
). However, if you instead of closing, you click on an image you expect that new page to load contextually too. So user
-> board
-> image
. At this point, if you close, you should go back to the boards
page and not to the user
page. (user
-> board
-> image
-> ESC
= board
). But on my specific case I'm back to the user user
-> board
-> image
-> ESC
= user
).
Is it possible to have nested contextual routes that allow me to go from:
user
-> board
-> image
, hit ESC and be back at board
hit ESC and be back on user
page?
Normally you would query the url string like so:
const { id } = router.query
However, how do we access the id
parameter with SSG?
export async function getStaticProps({ params }) {
const { id } = params.id
// fetch data...
does not seem to work
Thanks, and awesome library!
If you look at https://toomuchdesign.github.io/next-use-contextual-routing/ you'll see that when you open (say) post #1, and then refresh the page, you lose the page "behind" post #1 (ie. the initial page).
I'm looking for a very similar effect, except I want to preserve the "behind page" on refreshes, so that the user sees the same page that they saw before they refreshed, afterward. It is it possible to use the library in this way, eg. by somehow providing the "before page" (or path) to useContextualRouting()
?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.