useLockBodyScroll

docs/useLockBodyScroll.md

@@ -0,0 +1,31 @@
+# `useLockBodyScroll`
+
+React side-effect hook that locks scrolling on the body element. Useful for modal and other overlay components.
+
+## Usage
+
+```jsx
+import {useLockBodyScroll, useToggle} from 'react-use';
+
+const Demo = () => {
+  const [locked, toggleLocked] = useToggle(false)
+
+  useLockBodyScroll(locked);
+
+  return (
+    <div>
+      <button onClick={() => toggleLocked()}>
+        {locked ? 'Unlock' : 'Lock'}
+      </button>
+    </div>
+  );
+};
+```
+
+## Reference
+
+```ts
+useToggle(enabled?: boolean = true);
+```
+
+- `enabled` &mdash; Hook will lock scrolling on the body element if `true`, defaults to `true`

src/__stories__/useLockBodyScroll.story.tsx

@@ -0,0 +1,24 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useLockBodyScroll, useToggle} from '..';
+import ShowDocs from '../util/ShowDocs';
+
+const Demo = () => {
+  const [locked, toggleLocked] = useToggle(false)
+
+  useLockBodyScroll(locked);
+
+  return (
+    <div style={{height: '200vh'}}>
+      <button onClick={() => toggleLocked()} style={{position: 'fixed', left: 0, right: 0}}>
+        {locked ? 'Unlock' : 'Lock'}
+      </button>
+    </div>
+  );
+};
+
+storiesOf('Side effects|useLockBodyScroll', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useLockBodyScroll.md')} />)
+  .add('Demo', () =>
+    <Demo/>
+  )

src/index.ts

@@ -21,6 +21,7 @@ import useLifecycles from './useLifecycles';
 import useList from './useList';
 import useLocalStorage from './useLocalStorage';
 import useLocation from './useLocation';
+import useLockBodyScroll from './useLockBodyScroll';
 import useLogger from './useLogger';
 import useMap from './useMap';
 import useMedia from './useMedia';
@@ -77,6 +78,7 @@ export {
   useList,
   useLocalStorage,
   useLocation,
+  useLockBodyScroll,
   useLogger,
   useMap,
   useMedia,

src/useLockBodyScroll.ts

@@ -0,0 +1,19 @@
+import {useRef, useEffect} from 'react';
+import {isClient} from './util';
+import useUnmount from './useUnmount';
+
+const useLockBodyScroll = (enabled: boolean = true) => {
+  const originalOverflow = useRef(
+    isClient ? window.getComputedStyle(document.body).overflow : 'visible'
+  );
+
+  useEffect(() => {
+    document.body.style.overflow = enabled ? "hidden" : originalOverflow.current;
+  }, [enabled]);
+
+  useUnmount(() => {
+    document.body.style.overflow = originalOverflow.current
+  });
+}
+
+export default useLockBodyScroll;