feat: add new hook useFreezeScroll

docs/useFreezeScroll.md

@@ -0,0 +1,26 @@
+# `useFreezeScroll`
+
+React hook that freezes the scroll and removes the scrollbar from the browser window when it is active without any layout shift, for example, when a modal is opened.
+
+## Usage
+
+```jsx
+import { useFreezeScroll } from 'react-use';
+
+const Demo = () => {
+  const [isActive, setIsActive] = useState(false);
+  useFreezeScroll(isActive);
+
+  return (
+    <div style={{ height: '5000px' }}>
+      <div style={{ marginTop: '20px' }}>
+        <p>Scroll should be frozen when enabled.</p>
+        <p>Try scrolling to test the effect.</p>
+      </div>
+      <button onClick={() => setIsActive(!isActive)} style={{ position: 'sticky', top: '100px' }}>
+        {isActive ? 'Disable Freeze Scroll' : 'Enable Freeze Scroll'}
+      </button>
+    </div>
+  );
+};
+```

src/index.ts

@@ -115,3 +115,4 @@ export { useFirstMountState } from './useFirstMountState';
 export { default as useSet } from './useSet';
 export { createGlobalState } from './factory/createGlobalState';
 export { useHash } from './useHash';
+export { useFreezeScroll } from './useFreezeScroll';

src/useFreezeScroll.ts

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+export function useFreezeScroll(isActive: boolean) {
+  useEffect(() => {
+    if (!isActive) return;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.documentElement.style.marginRight = scrollbarWidth + 'px';
+    document.documentElement.style.overflow = 'hidden';
+
+    return () => {
+      document.documentElement.style.overflow = 'visible';
+      document.documentElement.style.marginRight = '0';
+    };
+  }, [isActive]);
+}

stories/useFreezeScroll.story.tsx

@@ -0,0 +1,25 @@
+import { storiesOf } from '@storybook/react';
+import React, { useState } from 'react';
+import { useFreezeScroll } from '../src/useFreezeScroll';
+import ShowDocs from './util/ShowDocs';
+
+const Demo = () => {
+  const [isActive, setIsActive] = useState(false);
+  useFreezeScroll(isActive);
+
+  return (
+    <div style={{ height: '5000px' }}>
+      <div style={{ marginTop: '20px' }}>
+        <p>Scroll should be frozen when enabled.</p>
+        <p>Try scrolling to test the effect.</p>
+      </div>
+      <button onClick={() => setIsActive(!isActive)} style={{ position: 'sticky', top: '100px' }}>
+        {isActive ? 'Disable Freeze Scroll' : 'Enable Freeze Scroll'}
+      </button>
+    </div>
+  );
+};
+
+storiesOf('UI/useFreezeScroll', module)
+  .add('Docs', () => <ShowDocs md={require('../docs/useFreezeScroll.md')} />)
+  .add('Demo', () => <Demo />);

tests/useFreezeScroll.test.ts

@@ -0,0 +1,45 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useFreezeScroll } from '../src/useFreezeScroll';
+
+// Mock window.innerWidth and document.documentElement properties
+const originalWindowInnerWidth = window.innerWidth;
+const originalDocumentElementClientWidth = document.documentElement.clientWidth;
+
+beforeAll(() => {
+  Object.defineProperty(window, 'innerWidth', { writable: true, value: 805 }); // Set initial innerWidth
+  Object.defineProperty(document.documentElement, 'clientWidth', { writable: true, value: 800 }); // Set initial clientWidth
+});
+
+afterAll(() => {
+  Object.defineProperty(window, 'innerWidth', { writable: true, value: originalWindowInnerWidth });
+  Object.defineProperty(document.documentElement, 'clientWidth', {
+    writable: true,
+    value: originalDocumentElementClientWidth,
+  });
+});
+
+describe('useFreezeScroll', () => {
+  it('should remove scrollbar and freeze scroll when isActive is true', () => {
+    const { unmount } = renderHook(() => useFreezeScroll(true));
+
+    expect(document.documentElement.style.overflow).toBe('hidden');
+    expect(document.documentElement.style.marginRight).toBe('5px'); // Since we mocked innerWidth and clientWidth 805 - 800 = 5px
+    unmount();
+  });
+
+  it('should restore scrollbar and scroll when isActive becomes false', () => {
+    const { rerender, unmount } = renderHook(({ isActive }) => useFreezeScroll(isActive), {
+      initialProps: { isActive: true },
+    });
+
+    expect(document.documentElement.style.overflow).toBe('hidden');
+    expect(document.documentElement.style.marginRight).toBe('5px');
+
+    rerender({ isActive: false });
+
+    expect(document.documentElement.style.overflow).toBe('visible');
+    expect(document.documentElement.style.marginRight).toBe('0px');
+
+    unmount();
+  });
+});