♻️ Replace body-scroll-lock (#1609)

carloscuesta · Jan 27, 2025 · 01a7838 · 01a7838
1 parent 877a7d4
commit 01a7838
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 71 deletions.
diff --git a/package.json b/package.json
@@ -40,7 +40,6 @@
     "@vercel/analytics": "^1.4.1",
     "@vercel/kv": "3.0.0",
     "@vercel/speed-insights": "1.1.0",
-    "body-scroll-lock": "4.0.0-beta.0",
     "date-fns": "^4.1.0",
     "feed": "4.2.2",
     "lodash.groupby": "^4.6.0",
@@ -52,6 +51,7 @@
     "plaiceholder": "2.5.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
+    "react-remove-scroll": "2.6.3",
     "rehype-autolink-headings": "7.1.0",
     "rehype-external-links": "^3.0.0",
     "rehype-preset-minify": "7.0.1",
@@ -77,7 +77,6 @@
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
-    "@types/body-scroll-lock": "3.1.2",
     "@types/jest": "29.5.14",
     "@types/lodash.groupby": "4.6.9",
     "@types/react": "19.0.8",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Layout/NavigationMenu/Hamburger/index.tsx b/src/components/Layout/NavigationMenu/Hamburger/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { usePathname } from 'next/navigation'
-import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
+import { RemoveScroll } from 'react-remove-scroll'
 
 import Links from '../Links'
 import OpenIcon from './OpenIcon'
@@ -14,18 +14,6 @@ const Hamburger = (props: Props) => {
   const buttonClassName =
     'fill-black p-2 dark:fill-white focus:outline-hidden focus:ring-1 focus:ring-neutral-300 dark:focus:ring-neutral-500 rounded-lg'
 
-  useEffect(() => {
-    if (isOpen) {
-      const documentBody = document.body
-
-      disableBodyScroll(documentBody)
-
-      return () => {
-        enableBodyScroll(documentBody)
-      }
-    }
-  }, [isOpen])
-
   useEffect(() => {
     if (isOpen) {
       setIsOpen(false)
@@ -44,29 +32,31 @@ const Hamburger = (props: Props) => {
       </button>
 
       {props.isOpen && (
-        <nav className="fixed bottom-0 left-0 right-0 top-0 z-10 bg-white dark:bg-black">
-          <div className="absolute right-0 px-6 py-2">
-            <button
-              aria-label="Close navigation menu"
-              onClick={() => setIsOpen(false)}
-              className={buttonClassName}
-              tabIndex={0}
-            >
-              <CloseIcon />
-            </button>
-          </div>
+        <RemoveScroll>
+          <nav className="fixed bottom-0 left-0 right-0 top-0 z-10 bg-white dark:bg-black">
+            <div className="absolute right-0 px-6 py-2">
+              <button
+                aria-label="Close navigation menu"
+                onClick={() => setIsOpen(false)}
+                className={buttonClassName}
+                tabIndex={0}
+              >
+                <CloseIcon />
+              </button>
+            </div>
 
-          <Links
-            isHamburguer
-            links={[
-              { href: '/', text: 'Home' },
-              { href: '/about', text: 'About' },
-              { href: '/blog', text: 'Blog' },
-              { href: '/uses', text: 'Uses' },
-              { href: '/photos', text: 'Photos' },
-            ]}
-          />
-        </nav>
+            <Links
+              isHamburguer
+              links={[
+                { href: '/', text: 'Home' },
+                { href: '/about', text: 'About' },
+                { href: '/blog', text: 'Blog' },
+                { href: '/uses', text: 'Uses' },
+                { href: '/photos', text: 'Photos' },
+              ]}
+            />
+          </nav>
+        </RemoveScroll>
       )}
     </div>
   )

diff --git a/src/components/Layout/__tests__/layout.spec.tsx b/src/components/Layout/__tests__/layout.spec.tsx
@@ -1,10 +1,7 @@
-import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
-import { act, render, screen, waitFor } from '@testing-library/react'
+import { act, render, screen } from '@testing-library/react'
 
 import Layout from '../index'
 
-jest.mock('body-scroll-lock')
-
 describe('Layout', () => {
   beforeAll(() => {
     jest.useFakeTimers()
@@ -29,7 +26,7 @@ describe('Layout', () => {
   describe('Hamburguer', () => {
     describe('when the menu is closed', () => {
       describe('when user clicks on the icon', () => {
-        it('should open the navigation menu and lock the body scroll', async () => {
+        it('should open the navigation menu', async () => {
           render(
             <Layout>
               <h1>Some children</h1>
@@ -41,18 +38,14 @@ describe('Layout', () => {
             screen.getByLabelText('Open navigation menu').click()
           })
 
-          await waitFor(() => {
-            expect(disableBodyScroll).toHaveBeenCalledWith(document.body)
-          })
-
           expect(screen.getByLabelText('Close navigation menu')).toBeVisible()
         })
       })
     })
 
     describe('when the menu is opened', () => {
       describe('when user clicks on the icon', () => {
-        it('should close the navigation menu and release the scroll', async () => {
+        it('should close the navigation menu', async () => {
           render(
             <Layout>
               <h1>Some children</h1>
@@ -64,18 +57,10 @@ describe('Layout', () => {
             screen.getByLabelText('Open navigation menu').click()
           })
 
-          await waitFor(() => {
-            expect(disableBodyScroll).toHaveBeenCalledWith(document.body)
-          })
-
           act(() => {
             screen.getByLabelText('Close navigation menu').click()
           })
 
-          await waitFor(() => {
-            expect(enableBodyScroll).toHaveBeenCalledWith(document.body)
-          })
-
           expect(screen.getByLabelText('Open navigation menu')).toBeVisible()
         })
       })