From 76139c24ecf4a2a8cd67600a48c578f58f04076a Mon Sep 17 00:00:00 2001 From: Joshua Knauber Date: Sat, 21 Dec 2024 00:57:53 +0100 Subject: [PATCH 1/5] added scroll behavior prop --- packages/react-router/src/scroll-restoration.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/react-router/src/scroll-restoration.tsx b/packages/react-router/src/scroll-restoration.tsx index 26a3861e90..1401054513 100644 --- a/packages/react-router/src/scroll-restoration.tsx +++ b/packages/react-router/src/scroll-restoration.tsx @@ -1,8 +1,8 @@ import * as React from 'react' -import { useRouter } from './useRouter' -import { functionalUpdate } from './utils' import type { ParsedLocation } from './location' +import { useRouter } from './useRouter' import type { NonNullableUpdater } from './utils' +import { functionalUpdate } from './utils' const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect @@ -45,6 +45,7 @@ const cache: Cache = sessionsStorage export type ScrollRestorationOptions = { getKey?: (location: ParsedLocation) => string + scrollBehavior?: ScrollToOptions['behavior'] } /** @@ -154,7 +155,11 @@ export function useScrollRestoration(options?: ScrollRestorationOptions) { if (key === restoreKey) { if (elementSelector === windowKey) { windowRestored = true - window.scrollTo(entry.scrollX, entry.scrollY) + window.scrollTo({ + top: entry.scrollY, + left: entry.scrollX, + behavior: options?.scrollBehavior, + }) } else if (elementSelector) { const element = document.querySelector(elementSelector) if (element) { From c03e51db4c0e47cd41e6dc40ff16bbfe4af432f4 Mon Sep 17 00:00:00 2001 From: Joshua Knauber Date: Sat, 21 Dec 2024 11:16:17 +0100 Subject: [PATCH 2/5] reorder imports --- packages/react-router/src/scroll-restoration.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-router/src/scroll-restoration.tsx b/packages/react-router/src/scroll-restoration.tsx index 1401054513..6d764bebcf 100644 --- a/packages/react-router/src/scroll-restoration.tsx +++ b/packages/react-router/src/scroll-restoration.tsx @@ -1,8 +1,8 @@ import * as React from 'react' -import type { ParsedLocation } from './location' import { useRouter } from './useRouter' -import type { NonNullableUpdater } from './utils' import { functionalUpdate } from './utils' +import type { ParsedLocation } from './location' +import type { NonNullableUpdater } from './utils' const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect From 7f947238526264326c4941752f5c0456deffee92 Mon Sep 17 00:00:00 2001 From: Joshua Knauber Date: Sat, 21 Dec 2024 14:32:12 +0100 Subject: [PATCH 3/5] docs --- .../framework/react/guide/scroll-restoration.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/docs/framework/react/guide/scroll-restoration.md b/docs/framework/react/guide/scroll-restoration.md index 2f53c0519e..5ce72456a4 100644 --- a/docs/framework/react/guide/scroll-restoration.md +++ b/docs/framework/react/guide/scroll-restoration.md @@ -137,3 +137,20 @@ function Component() { ) } ``` + +## Scroll Behavior + +To control the scroll behavior when navigating between pages, you can use the `scrollBehavior` option. This allows you to make the transition between pages instant instead of a smooth scroll. + +```tsx +import { ScrollRestoration } from '@tanstack/react-router' + +function Root() { + return ( + <> + + + + ) +} +``` \ No newline at end of file From 724fa9b5860e60fa9f9bfbcf447e37f79dbd72fc Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sat, 21 Dec 2024 15:11:16 +0000 Subject: [PATCH 4/5] ci: apply automated fixes --- docs/framework/react/guide/scroll-restoration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/framework/react/guide/scroll-restoration.md b/docs/framework/react/guide/scroll-restoration.md index 5ce72456a4..01edf63a85 100644 --- a/docs/framework/react/guide/scroll-restoration.md +++ b/docs/framework/react/guide/scroll-restoration.md @@ -153,4 +153,4 @@ function Root() { ) } -``` \ No newline at end of file +``` From 8d0304064f4b178b002b7ad24b5a17150de8fe84 Mon Sep 17 00:00:00 2001 From: Sean Cassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sun, 22 Dec 2024 12:41:03 +1300 Subject: [PATCH 5/5] Update docs/framework/react/guide/scroll-restoration.md --- docs/framework/react/guide/scroll-restoration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/framework/react/guide/scroll-restoration.md b/docs/framework/react/guide/scroll-restoration.md index 01edf63a85..7b56faa245 100644 --- a/docs/framework/react/guide/scroll-restoration.md +++ b/docs/framework/react/guide/scroll-restoration.md @@ -140,7 +140,7 @@ function Component() { ## Scroll Behavior -To control the scroll behavior when navigating between pages, you can use the `scrollBehavior` option. This allows you to make the transition between pages instant instead of a smooth scroll. +To control the scroll behavior when navigating between pages, you can use the `scrollBehavior` option. This allows you to make the transition between pages instant instead of a smooth scroll. The global configuration of scroll restoration behavior has the same options as those supported by the browser, which are `smooth`, `instant`, and `auto` (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#behavior) for more information). ```tsx import { ScrollRestoration } from '@tanstack/react-router'