Skip to content

Commit

Permalink
chore: remove scroll container (#29437)
Browse files Browse the repository at this point in the history
* remove scroll container

* update docs to remove deprecated stuff
  • Loading branch information
LB committed Feb 11, 2021
1 parent 6365768 commit a7c36de
Show file tree
Hide file tree
Showing 3 changed files with 1 addition and 119 deletions.
23 changes: 1 addition & 22 deletions docs/docs/how-to/routing/scroll-restoration.md
Expand Up @@ -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.

Expand All @@ -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 (
<ScrollContainer key="page-component-ul-list">
<ul style={{ height: 200, overflow: `auto` }}>
{countryList.map(country => (
<li>{country}</li>
))}
</ul>
</ScrollContainer>
)
}
}
```
1 change: 0 additions & 1 deletion 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"
96 changes: 0 additions & 96 deletions packages/gatsby-react-router-scroll/src/scroll-container.tsx

This file was deleted.

0 comments on commit a7c36de

Please sign in to comment.