Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/revotale/next-scroll-restorer
Scroll restoration for NextJs apps built with `app` directory. Fixed bugs that NextJs team do not fix.
https://github.com/revotale/next-scroll-restorer
nextjs scrollrestoration
Last synced: 5 days ago
JSON representation
Scroll restoration for NextJs apps built with `app` directory. Fixed bugs that NextJs team do not fix.
- Host: GitHub
- URL: https://github.com/revotale/next-scroll-restorer
- Owner: RevoTale
- License: mit
- Created: 2023-09-09T21:31:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-17T23:25:37.000Z (3 months ago)
- Last Synced: 2024-12-18T11:07:40.118Z (5 days ago)
- Topics: nextjs, scrollrestoration
- Language: TypeScript
- Size: 322 KB
- Stars: 32
- Watchers: 1
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# NextJs Scroll Restorer
[next-scroll-restorer](https://www.npmjs.com/package/next-scroll-restorer) handles scroll restoration for Next.js apps built with **app** directory.
Fixed bugs that Next.js team ignored.
**Important!** This component works only for application written with [**Next.js 'app' directory**](https://nextjs.org/docs/app).
## Install
- `npm install next-scroll-restorer` for [NPM](https://www.npmjs.com/package/next-scroll-restorer)
- `pnpm add next-scroll-restorer` for [pnpm](https://pnpm.io)
- `yarn add next-scroll-restorer` for [Yarn](https://yarnpkg.com)
## Key features
- 100% of codebase written in Typescript
- Can be used at any nesting `layout.tsx` file. Root layout isn't required.
- Fixed bug where built-in Next.js scroll restoration is not immediate
- Fixed annoying bug where [scroll position forgotten by Next.js built-in scroll restoration.](https://github.com/vercel/next.js/issues/53777)
- Extensive testing in different browsers with [Playwright](https://github.com/microsoft/playwright) testing library.
## Presequences
Before you start, keep in mind following rules.
- Keep disabled native `scrollRestoration` option in Next.js config to avoid conflicts.
- **Skip this rule for Next.js [14.1.0](https://github.com/vercel/next.js/releases/tag/v14.1.0) and higher.** In case your Next.js version is less than [14.1.0](https://github.com/vercel/next.js/releases/tag/v14.1.0) then you should enable `windowHistorySupport` in your Next.js config under `expermimental` property.
[Since Next.js 14.1.0 browser history support is enabled by default.](https://github.com/vercel/next.js/pull/60557)
```js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental:{
//Only For Next.js versions prior to 14.1.0 because it is enabled by default since version 14.1.0
windowHistorySupport:true
},
}
module.exports = nextConfig
```
## Usage
### Step 1
Create component named `ClientSideScrollRestorer` in your `src` directory with `useScrollRestorer` hook and `"use client"` directive to prevent server errors.
**src/ClientSideScrollRestorer.tsx**
```tsx
"use client"
import {useScrollRestorer} from 'next-scroll-restorer';
const ClientSideScrollRestorer = () => {
useScrollRestorer()
return <>>
}
export default ClientSideScrollRestorer
```
### Step 2
Import component created in a previous step to your root layout file (layout.tsx).
Wrap it wih [React](https://react.dev/reference/react/Suspense) `` to avoid possible [client-side deopting for entire page](https://nextjs.org/docs/messages/deopted-into-client-rendering).
**app/layout.tsx**
```tsx
import ClientSideScrollRestorer from '../src/ClientSideScrollRestorer'
import {ReactNode, Suspense} from "react";
type Props = {
children: ReactNode
}
const RootLayout = ({children}) => {
return (
{children}
)
}
export default RootLayout
```
It can be any nesting layout shared by [group of routes](https://nextjs.org/docs/app/building-your-application/routing/route-groups) in case you do not want to enable scroll restoration for the whole application.