Merge pull request #18 from martinbroos/lock-scroll

added use lock scroll hook

Author: martinbroos

README.md

@@ -535,6 +535,32 @@ const SomeComponent: React.VFC = ({ slug }) => {
 }
 ```
 
+### `useLockScroll`
+
+When a modal / popover opens you often want to lock the scroll of the body to prevent double scrollsbars.
+This hook provides two types of lock solutions that are often used.
+
+LockType.Overflow is clean and has less impact on code but is not supported in IOS / Safari
+LockType.Fixed uses position fixed but remembers your scroll position to prevent jumping to top of page. Use when you need all support, could have more impact on your styles.
+> More info can be found here: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
+
+Usage
+```typescript jsx
+import useLockScroll, { LockType } from '@freshheads/javascript-essentials/build/react/hooks/useLockScroll';
+
+
+const Modal = () => {
+    const { isOpen, setIsOpen } = useState<boolean>(false);
+    useLockScroll(LockType.Overflow, isOpen);
+
+    // ...
+}
+```
+
+> There are other solutions:
+> 1. https://github.com/willmcpo/body-scroll-lock -> prevents touch events on iOS in combination with overflow
+> 2. Use overscroll-behavior: contain; -> Css only but seems to have some drawbacks (good for research / first try)
+
 ## Routing
 
 ### `createPathFromRoute`
@@ -664,4 +690,3 @@ toJson({ value: new SomeClass() }); // = typescript error
 -   [Tracking utilities](https://github.com/freshheads/013/blob/develop/assets/frontend/src/js/utility/trackingUtilities.ts) (misschien ook HOC oid. `withTrackingOnClick` oid.? Of een hook?)
 -   [Routing: extract path with placeholders](https://github.com/freshheads/013/blob/develop/assets/frontend/src/js/routing/utility/urlGenerator.ts#L13)
 -   [Group object array preserving order](https://github.com/freshheads/freshheads-data-2.0/blob/develop/assets/frontend/src/js/components/blueprintPeriodResultOverview/utilities/resultSortingUtilities.ts)
-- [LockScroll](https://github.com/freshheads/freshheads-kerstwens-2020/blob/main/src/hooks/useLockHtmlScroll.ts)

src/react/hooks/__tests__/useLockScroll.test.ts

@@ -0,0 +1,16 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useLockScroll, { LockType } from '../useLockScroll';
+
+describe('useLockScroll', () => {
+    it('should add overflow to html element', () => {
+        renderHook(() => useLockScroll(LockType.Overflow, true));
+
+        expect(document.documentElement.style.overflow).toBe('hidden');
+    });
+
+    it('should add position fixed to body element', () => {
+        renderHook(() => useLockScroll(LockType.Fixed, true));
+
+        expect(document.body.style.position).toBe('fixed');
+    });
+});

src/react/hooks/useLockScroll.ts

@@ -0,0 +1,114 @@
+import { useEffect } from 'react';
+
+export enum LockType {
+    Overflow = 'overflow',
+    Fixed = 'fixed',
+}
+
+let counter = 0;
+let originalOverflow: string | null = null;
+let originalPosition: string | null = null;
+let scrollOffsetY = 0;
+let scrollOffsetX = 0;
+let useBodyScroll = false;
+let currentLockType: LockType | null = null;
+
+// Supports two lock types eg. Overflow or Fixed
+// Overflow is clean and has less impact on code but is not supported in IOS / Safari
+// @see https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
+// There are other solutions:
+// 1. https://github.com/willmcpo/body-scroll-lock -> prevents touch events on iOS in combination with overflow
+// 2. Use overscroll-behavior: contain; -> Css only but seems to have some drawbacks (good for research / first try)
+const lock = () => {
+    switch (currentLockType) {
+        case LockType.Overflow:
+            originalOverflow = window.getComputedStyle(document.documentElement)
+                .overflow;
+            document.documentElement.style.overflow = 'hidden';
+
+            return;
+        case LockType.Fixed:
+            originalPosition = window.getComputedStyle(document.body).position;
+
+            // @todo move calculate position logic to utility which can be used separately
+            scrollOffsetY =
+                window.scrollY ||
+                document.documentElement.scrollTop ||
+                document.body.scrollTop;
+            scrollOffsetX =
+                window.scrollX ||
+                document.documentElement.scrollLeft ||
+                document.body.scrollLeft;
+            useBodyScroll =
+                document.body.scrollLeft > 0 &&
+                document.documentElement.scrollLeft === 0;
+
+            document.body.style.position = 'fixed';
+            document.body.style.top = `-${scrollOffsetY}px`;
+            document.body.style.left = `-${scrollOffsetX}px`;
+
+            return;
+        default:
+            throw new Error('Lock type not supported');
+    }
+};
+
+const unlock = () => {
+    switch (currentLockType) {
+        case LockType.Overflow:
+            if (originalOverflow) {
+                document.documentElement.style.overflow = originalOverflow;
+            }
+
+            originalOverflow = null;
+
+            return;
+        case LockType.Fixed:
+            if (originalPosition) {
+                document.body.style.position = originalPosition;
+            }
+
+            if (useBodyScroll) {
+                window.scrollTo(0, scrollOffsetY);
+                document.body.scrollTo(scrollOffsetX, 0);
+            } else {
+                window.scrollTo(scrollOffsetX, scrollOffsetY);
+            }
+
+            originalPosition = null;
+
+            return;
+        default:
+            throw new Error('Lock type not supported');
+    }
+};
+
+const increment = () => {
+    counter++;
+    if (counter === 1) {
+        lock();
+    }
+};
+
+const decrement = () => {
+    counter--;
+    if (counter === 0) {
+        unlock();
+    }
+};
+
+const useLockScroll = (lockType: LockType, enabled = true) => {
+    useEffect(() => {
+        if (enabled) {
+            currentLockType = lockType;
+
+            increment();
+
+            return () => decrement();
+        }
+
+        return;
+    }, [enabled, lockType]);
+};
+
+export default useLockScroll;