Skip to content

Instantly share code, notes, and snippets.

@lensbart

lensbart/react-router+7.6.0.patch

Created May 20, 2025 14:11
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save lensbart/ffe8cc4ead36d1561b15b77ccd5473d0 to your computer and use it in GitHub Desktop.
Download ZIP
Patch to `react-router@7.6.0` adding a `getScrollContainer` prop to `<ScrollRestoration />`
Raw
react-router+7.6.0.patch
diff --git a/node_modules/react-router/dist/development/chunk-D4RADZKF.mjs b/node_modules/react-router/dist/development/chunk-D4RADZKF.mjs
index d3dd919..fcbb73c 100644
--- a/node_modules/react-router/dist/development/chunk-D4RADZKF.mjs
+++ b/node_modules/react-router/dist/development/chunk-D4RADZKF.mjs
@@ -9044,6 +9044,7 @@ var Form = React10.forwardRef(
Form.displayName = "Form";
function ScrollRestoration({
getKey,
+ getScrollContainer,
storageKey,
...props
}) {
@@ -9051,7 +9052,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;
@@ -9070,7 +9071,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 }, "");
@@ -9079,7 +9080,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);
@@ -9094,7 +9096,7 @@ function ScrollRestoration({
dangerouslySetInnerHTML: {
__html: `(${restoreScroll})(${JSON.stringify(
storageKey || SCROLL_RESTORATION_STORAGE_KEY
- )}, ${JSON.stringify(ssrKey)})`
+ )}, ${JSON.stringify(ssrKey)}, ${JSON.stringify(getScrollContainer)})`
}
}
);
@@ -9347,6 +9349,7 @@ function getScrollRestorationKey(location, matches, basename, getKey) {
}
function useScrollRestoration({
getKey,
+ getScrollContainer,
storageKey
} = {}) {
let { router } = useDataRouterContext3("useScrollRestoration" /* UseScrollRestoration */);
@@ -9367,7 +9370,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(
@@ -9398,7 +9401,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();
@@ -9407,8 +9410,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) {
@@ -9423,7 +9427,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 751e861..fa40d5d 100644
--- a/node_modules/react-router/dist/development/index.d.ts
+++ b/node_modules/react-router/dist/development/index.d.ts
@@ -1666,6 +1666,7 @@ type ScrollRestorationProps = ScriptsProps & {
```
*/
getKey?: GetScrollRestorationKeyFunction;
+ getScrollContainer?: () => HTMLElement | null;
storageKey?: string;
};
/**
@@ -1694,7 +1695,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;
}
@@ -2058,8 +2059,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 11d0690..331d686 100644
--- a/node_modules/react-router/dist/development/index.js
+++ b/node_modules/react-router/dist/development/index.js
@@ -9194,6 +9194,7 @@ var Form = React10.forwardRef(
Form.displayName = "Form";
function ScrollRestoration({
getKey,
+ getScrollContainer,
storageKey,
...props
}) {
@@ -9201,7 +9202,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;
@@ -9220,7 +9221,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 }, "");
@@ -9229,7 +9230,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);
@@ -9244,7 +9246,7 @@ function ScrollRestoration({
dangerouslySetInnerHTML: {
__html: `(${restoreScroll})(${JSON.stringify(
storageKey || SCROLL_RESTORATION_STORAGE_KEY
- )}, ${JSON.stringify(ssrKey)})`
+ )}, ${JSON.stringify(ssrKey)}, ${JSON.stringify(getScrollContainer)})`
}
}
);
@@ -9497,6 +9499,7 @@ function getScrollRestorationKey(location, matches, basename, getKey) {
}
function useScrollRestoration({
getKey,
+ getScrollContainer,
storageKey
} = {}) {
let { router } = useDataRouterContext3("useScrollRestoration" /* UseScrollRestoration */);
@@ -9517,7 +9520,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(
@@ -9548,7 +9551,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();
@@ -9557,8 +9560,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) {
@@ -9573,7 +9577,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-CCSAGgcP.d.mts b/node_modules/react-router/dist/development/lib-CCSAGgcP.d.mts
index 12835c3..431b398 100644
--- a/node_modules/react-router/dist/development/lib-CCSAGgcP.d.mts
+++ b/node_modules/react-router/dist/development/lib-CCSAGgcP.d.mts
@@ -1279,6 +1279,7 @@ type ScrollRestorationProps = ScriptsProps & {
```
*/
getKey?: GetScrollRestorationKeyFunction;
+ getScrollContainer?: () => HTMLElement | null;
storageKey?: string;
};
/**
@@ -1307,7 +1308,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;
}
@@ -1671,8 +1672,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-CVXGOGHQ.mjs b/node_modules/react-router/dist/production/chunk-CVXGOGHQ.mjs
index 284f4cc..57af0c5 100644
--- a/node_modules/react-router/dist/production/chunk-CVXGOGHQ.mjs
+++ b/node_modules/react-router/dist/production/chunk-CVXGOGHQ.mjs
@@ -9044,6 +9044,7 @@ var Form = React10.forwardRef(
Form.displayName = "Form";
function ScrollRestoration({
getKey,
+ getScrollContainer,
storageKey,
...props
}) {
@@ -9051,7 +9052,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;
@@ -9070,7 +9071,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 }, "");
@@ -9079,7 +9080,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);
@@ -9094,7 +9096,7 @@ function ScrollRestoration({
dangerouslySetInnerHTML: {
__html: `(${restoreScroll})(${JSON.stringify(
storageKey || SCROLL_RESTORATION_STORAGE_KEY
- )}, ${JSON.stringify(ssrKey)})`
+ )}, ${JSON.stringify(ssrKey)}, ${JSON.stringify(getScrollContainer)})`
}
}
);
@@ -9347,6 +9349,7 @@ function getScrollRestorationKey(location, matches, basename, getKey) {
}
function useScrollRestoration({
getKey,
+ getScrollContainer,
storageKey
} = {}) {
let { router } = useDataRouterContext3("useScrollRestoration" /* UseScrollRestoration */);
@@ -9367,7 +9370,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(
@@ -9398,7 +9401,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();
@@ -9407,8 +9410,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) {
@@ -9423,7 +9427,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 751e861..fa40d5d 100644
--- a/node_modules/react-router/dist/production/index.d.ts
+++ b/node_modules/react-router/dist/production/index.d.ts
@@ -1666,6 +1666,7 @@ type ScrollRestorationProps = ScriptsProps & {
```
*/
getKey?: GetScrollRestorationKeyFunction;
+ getScrollContainer?: () => HTMLElement | null;
storageKey?: string;
};
/**
@@ -1694,7 +1695,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;
}
@@ -2058,8 +2059,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 195b12b..b643eaa 100644
--- a/node_modules/react-router/dist/production/index.js
+++ b/node_modules/react-router/dist/production/index.js
@@ -9194,6 +9194,7 @@ var Form = React10.forwardRef(
Form.displayName = "Form";
function ScrollRestoration({
getKey,
+ getScrollContainer,
storageKey,
...props
}) {
@@ -9201,7 +9202,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;
@@ -9220,7 +9221,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 }, "");
@@ -9229,7 +9230,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);
@@ -9244,7 +9246,7 @@ function ScrollRestoration({
dangerouslySetInnerHTML: {
__html: `(${restoreScroll})(${JSON.stringify(
storageKey || SCROLL_RESTORATION_STORAGE_KEY
- )}, ${JSON.stringify(ssrKey)})`
+ )}, ${JSON.stringify(ssrKey)}, ${JSON.stringify(getScrollContainer)})`
}
}
);
@@ -9497,6 +9499,7 @@ function getScrollRestorationKey(location, matches, basename, getKey) {
}
function useScrollRestoration({
getKey,
+ getScrollContainer,
storageKey
} = {}) {
let { router } = useDataRouterContext3("useScrollRestoration" /* UseScrollRestoration */);
@@ -9517,7 +9520,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(
@@ -9548,7 +9551,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();
@@ -9557,8 +9560,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) {
@@ -9573,7 +9577,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-CCSAGgcP.d.mts b/node_modules/react-router/dist/production/lib-CCSAGgcP.d.mts
index 12835c3..431b398 100644
--- a/node_modules/react-router/dist/production/lib-CCSAGgcP.d.mts
+++ b/node_modules/react-router/dist/production/lib-CCSAGgcP.d.mts
@@ -1279,6 +1279,7 @@ type ScrollRestorationProps = ScriptsProps & {
```
*/
getKey?: GetScrollRestorationKeyFunction;
+ getScrollContainer?: () => HTMLElement | null;
storageKey?: string;
};
/**
@@ -1307,7 +1308,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;
}
@@ -1671,8 +1672,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