Skip to content

Instantly share code, notes, and snippets.

@lensbart

lensbart/react-router+7.6.2.patch

Created June 5, 2025 21:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lensbart/7310ad3066195a1f755289c1740d9bf3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lensbart/7310ad3066195a1f755289c1740d9bf3 to your computer and use it in GitHub Desktop.
Download ZIP
Add `getScrollContainer` prop to `<ScrollRestoration />` in `react-router@7.6.2`
Raw
react-router+7.6.2.patch
diff --git a/node_modules/react-router/dist/development/chunk-NL6KNZEE.mjs b/node_modules/react-router/dist/development/chunk-NL6KNZEE.mjs
index f54f35c..c0ab4cf 100644
--- a/node_modules/react-router/dist/development/chunk-NL6KNZEE.mjs
+++ b/node_modules/react-router/dist/development/chunk-NL6KNZEE.mjs
@@ -9082,6 +9082,7 @@ var Form = React10.forwardRef(
Form.displayName = "Form";
function ScrollRestoration({
getKey,
+ getScrollContainer,
storageKey,
...props
}) {
@@ -9089,7 +9090,7 @@ function ScrollRestoration({
let { basename } = React10.useContext(NavigationContext);
let location = useLocation();
let matches = useMatches();
- useScrollRestoration({ getKey, storageKey });
+ useScrollRestoration({ getKey, getScrollContainer, storageKey });
let ssrKey = React10.useMemo(
() => {
if (!remixContext || !getKey) return null;
@@ -9108,7 +9109,7 @@ function ScrollRestoration({
if (!remixContext || remixContext.isSpaMode) {
return null;
}
- let restoreScroll = ((storageKey2, restoreKey) => {
+ let restoreScroll = ((storageKey2, restoreKey, getScrollContainer2) => {
if (!window.history.state || !window.history.state.key) {
let key = Math.random().toString(32).slice(2);
window.history.replaceState({ key }, "");
@@ -9117,7 +9118,8 @@ function ScrollRestoration({
let positions = JSON.parse(sessionStorage.getItem(storageKey2) || "{}");
let storedY = positions[restoreKey || window.history.state.key];
if (typeof storedY === "number") {
- window.scrollTo(0, storedY);
+ let scrollContainer = getScrollContainer2?.() ?? window
+ scrollContainer.scrollTo(0, storedY);
}
} catch (error) {
console.error(error);
@@ -9132,7 +9134,7 @@ function ScrollRestoration({
dangerouslySetInnerHTML: {
__html: `(${restoreScroll})(${JSON.stringify(
storageKey || SCROLL_RESTORATION_STORAGE_KEY
- )}, ${JSON.stringify(ssrKey)})`
+ )}, ${JSON.stringify(ssrKey)}, ${JSON.stringify(getScrollContainer)})`
}
}
);
@@ -9385,6 +9387,7 @@ function getScrollRestorationKey(location, matches, basename, getKey) {
}
function useScrollRestoration({
getKey,
+ getScrollContainer,
storageKey
} = {}) {
let { router } = useDataRouterContext3("useScrollRestoration" /* UseScrollRestoration */);
@@ -9405,7 +9408,7 @@ function useScrollRestoration({
React10.useCallback(() => {
if (navigation.state === "idle") {
let key = getScrollRestorationKey(location, matches, basename, getKey);
- savedScrollPositions[key] = window.scrollY;
+ savedScrollPositions[key] = getScrollContainer?.()?.scrollTop ?? window.scrollY;
}
try {
sessionStorage.setItem(
@@ -9436,7 +9439,7 @@ function useScrollRestoration({
React10.useLayoutEffect(() => {
let disableScrollRestoration = router?.enableScrollRestoration(
savedScrollPositions,
- () => window.scrollY,
+ () => getScrollContainer?.()?.scrollTop ?? window.scrollY,
getKey ? (location2, matches2) => getScrollRestorationKey(location2, matches2, basename, getKey) : void 0
);
return () => disableScrollRestoration && disableScrollRestoration();
@@ -9445,8 +9448,9 @@ function useScrollRestoration({
if (restoreScrollPosition === false) {
return;
}
+ let scrollContainer = getScrollContainer?.() ?? window;
if (typeof restoreScrollPosition === "number") {
- window.scrollTo(0, restoreScrollPosition);
+ scrollContainer.scrollTo(0, restoreScrollPosition);
return;
}
if (location.hash) {
@@ -9461,7 +9465,7 @@ function useScrollRestoration({
if (preventScrollReset === true) {
return;
}
- window.scrollTo(0, 0);
+ scrollContainer.scrollTo(0, 0);
}, [location, restoreScrollPosition, preventScrollReset]);
}
}
diff --git a/node_modules/react-router/dist/development/index.d.ts b/node_modules/react-router/dist/development/index.d.ts
index c5e21dc..145a37a 100644
--- a/node_modules/react-router/dist/development/index.d.ts
+++ b/node_modules/react-router/dist/development/index.d.ts
@@ -1700,6 +1700,7 @@ type ScrollRestorationProps = ScriptsProps & {
```
*/
getKey?: GetScrollRestorationKeyFunction;
+ getScrollContainer?: () => HTMLElement | null;
storageKey?: string;
};
/**
@@ -1728,7 +1729,7 @@ type ScrollRestorationProps = ScriptsProps & {
@category Components
*/
-declare function ScrollRestoration({ getKey, storageKey, ...props }: ScrollRestorationProps): React.JSX.Element | null;
+declare function ScrollRestoration({ getKey, getScrollContainer, storageKey, ...props }: ScrollRestorationProps): React.JSX.Element | null;
declare namespace ScrollRestoration {
var displayName: string;
}
@@ -2092,8 +2093,9 @@ declare function useFetchers(): (Fetcher & {
/**
* When rendered inside a RouterProvider, will restore scroll positions on navigations
*/
-declare function useScrollRestoration({ getKey, storageKey, }?: {
+declare function useScrollRestoration({ getKey, getScrollContainer, storageKey, }?: {
getKey?: GetScrollRestorationKeyFunction;
+ getScrollContainer?: () => HTMLElement | null;
storageKey?: string;
}): void;
/**
diff --git a/node_modules/react-router/dist/development/index.js b/node_modules/react-router/dist/development/index.js
index 2848b75..5e83a43 100644
--- a/node_modules/react-router/dist/development/index.js
+++ b/node_modules/react-router/dist/development/index.js
@@ -9235,6 +9235,7 @@ var Form = React10.forwardRef(
Form.displayName = "Form";
function ScrollRestoration({
getKey,
+ getScrollContainer,
storageKey,
...props
}) {
@@ -9242,7 +9243,7 @@ function ScrollRestoration({
let { basename } = React10.useContext(NavigationContext);
let location = useLocation();
let matches = useMatches();
- useScrollRestoration({ getKey, storageKey });
+ useScrollRestoration({ getKey, getScrollContainer, storageKey });
let ssrKey = React10.useMemo(
() => {
if (!remixContext || !getKey) return null;
@@ -9261,7 +9262,7 @@ function ScrollRestoration({
if (!remixContext || remixContext.isSpaMode) {
return null;
}
- let restoreScroll = ((storageKey2, restoreKey) => {
+ let restoreScroll = ((storageKey2, restoreKey, getScrollContainer2) => {
if (!window.history.state || !window.history.state.key) {
let key = Math.random().toString(32).slice(2);
window.history.replaceState({ key }, "");
@@ -9270,7 +9271,8 @@ function ScrollRestoration({
let positions = JSON.parse(sessionStorage.getItem(storageKey2) || "{}");
let storedY = positions[restoreKey || window.history.state.key];
if (typeof storedY === "number") {
- window.scrollTo(0, storedY);
+ let scrollContainer = getScrollContainer2?.() ?? window
+ scrollContainer.scrollTo(0, storedY);
}
} catch (error) {
console.error(error);
@@ -9285,7 +9287,7 @@ function ScrollRestoration({
dangerouslySetInnerHTML: {
__html: `(${restoreScroll})(${JSON.stringify(
storageKey || SCROLL_RESTORATION_STORAGE_KEY
- )}, ${JSON.stringify(ssrKey)})`
+ )}, ${JSON.stringify(ssrKey)}, ${JSON.stringify(getScrollContainer)})`
}
}
);
@@ -9538,6 +9540,7 @@ function getScrollRestorationKey(location, matches, basename, getKey) {
}
function useScrollRestoration({
getKey,
+ getScrollContainer,
storageKey
} = {}) {
let { router } = useDataRouterContext3("useScrollRestoration" /* UseScrollRestoration */);
@@ -9558,7 +9561,7 @@ function useScrollRestoration({
React10.useCallback(() => {
if (navigation.state === "idle") {
let key = getScrollRestorationKey(location, matches, basename, getKey);
- savedScrollPositions[key] = window.scrollY;
+ savedScrollPositions[key] = getScrollContainer?.()?.scrollTop ?? window.scrollY;
}
try {
sessionStorage.setItem(
@@ -9589,7 +9592,7 @@ function useScrollRestoration({
React10.useLayoutEffect(() => {
let disableScrollRestoration = router?.enableScrollRestoration(
savedScrollPositions,
- () => window.scrollY,
+ () => getScrollContainer?.()?.scrollTop ?? window.scrollY,
getKey ? (location2, matches2) => getScrollRestorationKey(location2, matches2, basename, getKey) : void 0
);
return () => disableScrollRestoration && disableScrollRestoration();
@@ -9598,8 +9601,9 @@ function useScrollRestoration({
if (restoreScrollPosition === false) {
return;
}
+ let scrollContainer = getScrollContainer?.() ?? window;
if (typeof restoreScrollPosition === "number") {
- window.scrollTo(0, restoreScrollPosition);
+ scrollContainer.scrollTo(0, restoreScrollPosition);
return;
}
if (location.hash) {
@@ -9614,7 +9618,7 @@ function useScrollRestoration({
if (preventScrollReset === true) {
return;
}
- window.scrollTo(0, 0);
+ scrollContainer.scrollTo(0, 0);
}, [location, restoreScrollPosition, preventScrollReset]);
}
}
diff --git a/node_modules/react-router/dist/development/lib-C1JSsICm.d.mts b/node_modules/react-router/dist/development/lib-C1JSsICm.d.mts
index 72847d4..65eaf7e 100644
--- a/node_modules/react-router/dist/development/lib-C1JSsICm.d.mts
+++ b/node_modules/react-router/dist/development/lib-C1JSsICm.d.mts
@@ -1680,6 +1680,7 @@ type ScrollRestorationProps = ScriptsProps & {
```
*/
getKey?: GetScrollRestorationKeyFunction;
+ getScrollContainer?: () => HTMLElement | null;
storageKey?: string;
};
/**
@@ -1708,7 +1709,7 @@ type ScrollRestorationProps = ScriptsProps & {
@category Components
*/
-declare function ScrollRestoration({ getKey, storageKey, ...props }: ScrollRestorationProps): React.JSX.Element | null;
+declare function ScrollRestoration({ getKey, getScrollContainer, storageKey, ...props }: ScrollRestorationProps): React.JSX.Element | null;
declare namespace ScrollRestoration {
var displayName: string;
}
@@ -2072,8 +2073,9 @@ declare function useFetchers(): (Fetcher & {
/**
* When rendered inside a RouterProvider, will restore scroll positions on navigations
*/
-declare function useScrollRestoration({ getKey, storageKey, }?: {
+declare function useScrollRestoration({ getKey, getScrollContainer, storageKey, }?: {
getKey?: GetScrollRestorationKeyFunction;
+ getScrollContainer?: () => HTMLElement | null;
storageKey?: string;
}): void;
/**
diff --git a/node_modules/react-router/dist/production/chunk-JRQCFVZH.mjs b/node_modules/react-router/dist/production/chunk-JRQCFVZH.mjs
index 901729a..e4ed4db 100644
--- a/node_modules/react-router/dist/production/chunk-JRQCFVZH.mjs
+++ b/node_modules/react-router/dist/production/chunk-JRQCFVZH.mjs
@@ -9082,6 +9082,7 @@ var Form = React10.forwardRef(
Form.displayName = "Form";
function ScrollRestoration({
getKey,
+ getScrollContainer,
storageKey,
...props
}) {
@@ -9089,7 +9090,7 @@ function ScrollRestoration({
let { basename } = React10.useContext(NavigationContext);
let location = useLocation();
let matches = useMatches();
- useScrollRestoration({ getKey, storageKey });
+ useScrollRestoration({ getKey, getScrollContainer, storageKey });
let ssrKey = React10.useMemo(
() => {
if (!remixContext || !getKey) return null;
@@ -9108,7 +9109,7 @@ function ScrollRestoration({
if (!remixContext || remixContext.isSpaMode) {
return null;
}
- let restoreScroll = ((storageKey2, restoreKey) => {
+ let restoreScroll = ((storageKey2, restoreKey, getScrollContainer2) => {
if (!window.history.state || !window.history.state.key) {
let key = Math.random().toString(32).slice(2);
window.history.replaceState({ key }, "");
@@ -9117,7 +9118,8 @@ function ScrollRestoration({
let positions = JSON.parse(sessionStorage.getItem(storageKey2) || "{}");
let storedY = positions[restoreKey || window.history.state.key];
if (typeof storedY === "number") {
- window.scrollTo(0, storedY);
+ let scrollContainer = getScrollContainer2?.() ?? window
+ scrollContainer.scrollTo(0, storedY);
}
} catch (error) {
console.error(error);
@@ -9132,7 +9134,7 @@ function ScrollRestoration({
dangerouslySetInnerHTML: {
__html: `(${restoreScroll})(${JSON.stringify(
storageKey || SCROLL_RESTORATION_STORAGE_KEY
- )}, ${JSON.stringify(ssrKey)})`
+ )}, ${JSON.stringify(ssrKey)}, ${JSON.stringify(getScrollContainer)})`
}
}
);
@@ -9385,6 +9387,7 @@ function getScrollRestorationKey(location, matches, basename, getKey) {
}
function useScrollRestoration({
getKey,
+ getScrollContainer,
storageKey
} = {}) {
let { router } = useDataRouterContext3("useScrollRestoration" /* UseScrollRestoration */);
@@ -9405,7 +9408,7 @@ function useScrollRestoration({
React10.useCallback(() => {
if (navigation.state === "idle") {
let key = getScrollRestorationKey(location, matches, basename, getKey);
- savedScrollPositions[key] = window.scrollY;
+ savedScrollPositions[key] = getScrollContainer?.()?.scrollTop ?? window.scrollY;
}
try {
sessionStorage.setItem(
@@ -9436,7 +9439,7 @@ function useScrollRestoration({
React10.useLayoutEffect(() => {
let disableScrollRestoration = router?.enableScrollRestoration(
savedScrollPositions,
- () => window.scrollY,
+ () => getScrollContainer?.()?.scrollTop ?? window.scrollY,
getKey ? (location2, matches2) => getScrollRestorationKey(location2, matches2, basename, getKey) : void 0
);
return () => disableScrollRestoration && disableScrollRestoration();
@@ -9445,8 +9448,9 @@ function useScrollRestoration({
if (restoreScrollPosition === false) {
return;
}
+ let scrollContainer = getScrollContainer?.() ?? window;
if (typeof restoreScrollPosition === "number") {
- window.scrollTo(0, restoreScrollPosition);
+ scrollContainer.scrollTo(0, restoreScrollPosition);
return;
}
if (location.hash) {
@@ -9461,7 +9465,7 @@ function useScrollRestoration({
if (preventScrollReset === true) {
return;
}
- window.scrollTo(0, 0);
+ scrollContainer.scrollTo(0, 0);
}, [location, restoreScrollPosition, preventScrollReset]);
}
}
diff --git a/node_modules/react-router/dist/production/index.d.ts b/node_modules/react-router/dist/production/index.d.ts
index c5e21dc..145a37a 100644
--- a/node_modules/react-router/dist/production/index.d.ts
+++ b/node_modules/react-router/dist/production/index.d.ts
@@ -1700,6 +1700,7 @@ type ScrollRestorationProps = ScriptsProps & {
```
*/
getKey?: GetScrollRestorationKeyFunction;
+ getScrollContainer?: () => HTMLElement | null;
storageKey?: string;
};
/**
@@ -1728,7 +1729,7 @@ type ScrollRestorationProps = ScriptsProps & {
@category Components
*/
-declare function ScrollRestoration({ getKey, storageKey, ...props }: ScrollRestorationProps): React.JSX.Element | null;
+declare function ScrollRestoration({ getKey, getScrollContainer, storageKey, ...props }: ScrollRestorationProps): React.JSX.Element | null;
declare namespace ScrollRestoration {
var displayName: string;
}
@@ -2092,8 +2093,9 @@ declare function useFetchers(): (Fetcher & {
/**
* When rendered inside a RouterProvider, will restore scroll positions on navigations
*/
-declare function useScrollRestoration({ getKey, storageKey, }?: {
+declare function useScrollRestoration({ getKey, getScrollContainer, storageKey, }?: {
getKey?: GetScrollRestorationKeyFunction;
+ getScrollContainer?: () => HTMLElement | null;
storageKey?: string;
}): void;
/**
diff --git a/node_modules/react-router/dist/production/index.js b/node_modules/react-router/dist/production/index.js
index 7494b25..6d25f4d 100644
--- a/node_modules/react-router/dist/production/index.js
+++ b/node_modules/react-router/dist/production/index.js
@@ -9235,6 +9235,7 @@ var Form = React10.forwardRef(
Form.displayName = "Form";
function ScrollRestoration({
getKey,
+ getScrollContainer,
storageKey,
...props
}) {
@@ -9242,7 +9243,7 @@ function ScrollRestoration({
let { basename } = React10.useContext(NavigationContext);
let location = useLocation();
let matches = useMatches();
- useScrollRestoration({ getKey, storageKey });
+ useScrollRestoration({ getKey, getScrollContainer, storageKey });
let ssrKey = React10.useMemo(
() => {
if (!remixContext || !getKey) return null;
@@ -9261,7 +9262,7 @@ function ScrollRestoration({
if (!remixContext || remixContext.isSpaMode) {
return null;
}
- let restoreScroll = ((storageKey2, restoreKey) => {
+ let restoreScroll = ((storageKey2, restoreKey, getScrollContainer2) => {
if (!window.history.state || !window.history.state.key) {
let key = Math.random().toString(32).slice(2);
window.history.replaceState({ key }, "");
@@ -9270,7 +9271,8 @@ function ScrollRestoration({
let positions = JSON.parse(sessionStorage.getItem(storageKey2) || "{}");
let storedY = positions[restoreKey || window.history.state.key];
if (typeof storedY === "number") {
- window.scrollTo(0, storedY);
+ let scrollContainer = getScrollContainer2?.() ?? window
+ scrollContainer.scrollTo(0, storedY);
}
} catch (error) {
console.error(error);
@@ -9285,7 +9287,7 @@ function ScrollRestoration({
dangerouslySetInnerHTML: {
__html: `(${restoreScroll})(${JSON.stringify(
storageKey || SCROLL_RESTORATION_STORAGE_KEY
- )}, ${JSON.stringify(ssrKey)})`
+ )}, ${JSON.stringify(ssrKey)}, ${JSON.stringify(getScrollContainer)})`
}
}
);
@@ -9538,6 +9540,7 @@ function getScrollRestorationKey(location, matches, basename, getKey) {
}
function useScrollRestoration({
getKey,
+ getScrollContainer,
storageKey
} = {}) {
let { router } = useDataRouterContext3("useScrollRestoration" /* UseScrollRestoration */);
@@ -9558,7 +9561,7 @@ function useScrollRestoration({
React10.useCallback(() => {
if (navigation.state === "idle") {
let key = getScrollRestorationKey(location, matches, basename, getKey);
- savedScrollPositions[key] = window.scrollY;
+ savedScrollPositions[key] = getScrollContainer?.()?.scrollTop ?? window.scrollY;
}
try {
sessionStorage.setItem(
@@ -9589,7 +9592,7 @@ function useScrollRestoration({
React10.useLayoutEffect(() => {
let disableScrollRestoration = router?.enableScrollRestoration(
savedScrollPositions,
- () => window.scrollY,
+ () => getScrollContainer?.()?.scrollTop ?? window.scrollY,
getKey ? (location2, matches2) => getScrollRestorationKey(location2, matches2, basename, getKey) : void 0
);
return () => disableScrollRestoration && disableScrollRestoration();
@@ -9598,8 +9601,9 @@ function useScrollRestoration({
if (restoreScrollPosition === false) {
return;
}
+ let scrollContainer = getScrollContainer?.() ?? window;
if (typeof restoreScrollPosition === "number") {
- window.scrollTo(0, restoreScrollPosition);
+ scrollContainer.scrollTo(0, restoreScrollPosition);
return;
}
if (location.hash) {
@@ -9614,7 +9618,7 @@ function useScrollRestoration({
if (preventScrollReset === true) {
return;
}
- window.scrollTo(0, 0);
+ scrollContainer.scrollTo(0, 0);
}, [location, restoreScrollPosition, preventScrollReset]);
}
}
diff --git a/node_modules/react-router/dist/production/lib-C1JSsICm.d.mts b/node_modules/react-router/dist/production/lib-C1JSsICm.d.mts
index 72847d4..65eaf7e 100644
--- a/node_modules/react-router/dist/production/lib-C1JSsICm.d.mts
+++ b/node_modules/react-router/dist/production/lib-C1JSsICm.d.mts
@@ -1680,6 +1680,7 @@ type ScrollRestorationProps = ScriptsProps & {
```
*/
getKey?: GetScrollRestorationKeyFunction;
+ getScrollContainer?: () => HTMLElement | null;
storageKey?: string;
};
/**
@@ -1708,7 +1709,7 @@ type ScrollRestorationProps = ScriptsProps & {
@category Components
*/
-declare function ScrollRestoration({ getKey, storageKey, ...props }: ScrollRestorationProps): React.JSX.Element | null;
+declare function ScrollRestoration({ getKey, getScrollContainer, storageKey, ...props }: ScrollRestorationProps): React.JSX.Element | null;
declare namespace ScrollRestoration {
var displayName: string;
}
@@ -2072,8 +2073,9 @@ declare function useFetchers(): (Fetcher & {
/**
* When rendered inside a RouterProvider, will restore scroll positions on navigations
*/
-declare function useScrollRestoration({ getKey, storageKey, }?: {
+declare function useScrollRestoration({ getKey, getScrollContainer, storageKey, }?: {
getKey?: GetScrollRestorationKeyFunction;
+ getScrollContainer?: () => HTMLElement | null;
storageKey?: string;
}): void;
/**
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment