diff --git a/docs/docs/how-to/routing/scroll-restoration.md b/docs/docs/how-to/routing/scroll-restoration.md index 09e8e01fc36fe..dde8ad71fc8b9 100644 --- a/docs/docs/how-to/routing/scroll-restoration.md +++ b/docs/docs/how-to/routing/scroll-restoration.md @@ -4,7 +4,7 @@ title: Scroll Restoration Scroll restoration refers to the [`scrollRestoration`](https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration) property on the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) API. This property allows restoring a user's scroll position when navigating to a new page. -Gatsby will handle scroll restoration for you in most cases. However, when you render containers that have their own scroll values, those scroll positions are typically lost between page transitions. To solve that, users can use the `useScrollRestoration` hook or the (deprecated) `ScrollContainer` component in their code to tell Gatsby about scroll containers that we should track and restore. +Gatsby will handle scroll restoration for you in most cases. However, when you render containers that have their own scroll values, those scroll positions are typically lost between page transitions. To solve that, users can use the `useScrollRestoration` hook in their code to tell Gatsby about scroll containers that we should track and restore. Here is an example of using the `useScrollRestoration` hook to render a list of countries in an overflow `ul` element. @@ -24,24 +24,3 @@ export default function PageComponent() { ) } ``` - -This is an example of using the (deprecated) `ScrollContainer` component with the same code. - -```jsx -import { ScrollContainer } from "gatsby-react-router-scroll" -import countryList from "../utils/country-list" - -export default class PageComponent extends React.Component { - render() { - return ( - - - - ) - } -} -``` diff --git a/packages/gatsby-react-router-scroll/src/index.ts b/packages/gatsby-react-router-scroll/src/index.ts index fae4680adeb26..d0e98a11ed5a6 100644 --- a/packages/gatsby-react-router-scroll/src/index.ts +++ b/packages/gatsby-react-router-scroll/src/index.ts @@ -1,3 +1,2 @@ export { ScrollHandler as ScrollContext } from "./scroll-handler" -export { ScrollContainer } from "./scroll-container" export { useScrollRestoration } from "./use-scroll-restoration" diff --git a/packages/gatsby-react-router-scroll/src/scroll-container.tsx b/packages/gatsby-react-router-scroll/src/scroll-container.tsx deleted file mode 100644 index 5c09e57e777e6..0000000000000 --- a/packages/gatsby-react-router-scroll/src/scroll-container.tsx +++ /dev/null @@ -1,96 +0,0 @@ -// TODO: In Gatsby v3, this file should be removed. -// We are deprecating this in V2 in favor of useScrollRestoration -import * as React from "react" -import ReactDOM from "react-dom" -import PropTypes from "prop-types" -import { ScrollContext } from "./scroll-handler" -import { SessionStorage } from "./session-storage" -import { Location } from "@reach/router" -import { Location as HLocation } from "history" - -const propTypes = { - scrollKey: PropTypes.string.isRequired, - shouldUpdateScroll: PropTypes.func, - children: PropTypes.element.isRequired, -} - -interface IProps { - scrollKey: string - shouldUpdateScroll?: Function - children: React.ReactNode -} - -interface IPropsWithContextAndLocation extends IProps { - context: SessionStorage - location: HLocation -} - -let hasNotWarnedDeprecation = true - -class ScrollContainerImplementation extends React.Component< - IPropsWithContextAndLocation -> { - constructor(props: IPropsWithContextAndLocation) { - super(props) - - if (process.env.NODE_ENV !== `production` && hasNotWarnedDeprecation) { - hasNotWarnedDeprecation = false - console.log( - `Deprecation Warning: - - Gatsby is deprecated in Gatsby v2 and will be removed in Gatsby v3. - Update to the React hook alternative useScrollRestoration, like this:. - - \`\`\` - import React from 'react'; - import { useScrollRestoration } from 'gatsby-react-router-scroll'; - - function Component() { - const scrollRestoration = useScrollRestoration('${this.props.scrollKey}'); - - return