{"repo":"RevoTale/next-scroll-restorer","free":true,"listed":false,"github":"https://github.com/RevoTale/next-scroll-restorer","clone":"git clone https://github.com/RevoTale/next-scroll-restorer.git","description":"Scroll restoration for NextJs apps built with `app` directory. Fixed bugs that NextJs team do not fix.","language":"TypeScript","stars":123,"topics":["nextjs","scrollrestoration","nextjs-scroll-restoration"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"NextJs Scroll Restorer next-scroll-restorer handles scroll restoration for Next.js apps built with app directory. Fixed bugs related to forward/backward browser navigation that Next.js team ignored. Important! This component works only for application written with Next.js 'app' directory . Install - npm install next-scroll-restorer for NPM - pnpm add next-scroll-restorer for pnpm - yarn add next-scroll-restorer for Yarn 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. - Extensive testing in different browsers with 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 and higher. In case your Next.js version is less than 14.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. 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 Step 2 Import component created in a previous step to your root layout file (layout.tsx). Wrap it wih R","default_branch":null,"files":null,"tree":[],"storefront":"/r/RevoTale","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/RevoTale/next-scroll-restorer/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}