feat: 🎸 keep global state of all useLockBodyScroll hooks

This change will keep document body locked as long as at least one hook
is enabled on the page. Maybe it makes sense to generalize this logic
for other side-effect hooks. One such hook could be useBlurBody that
blurs page - useful for modals and overlays.

src/__stories__/useLockBodyScroll.story.tsx

@@ -5,20 +5,34 @@ 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}}>
+      <button onClick={() => toggleLocked()} style={{position: 'fixed', left: 0}}>
         {locked ? 'Unlock' : 'Lock'}
       </button>
     </div>
   );
 };
 
+const AnotherComponent = () => {
+  const [locked, toggleLocked] = useToggle(false)
+  useLockBodyScroll(locked);
+
+  return (
+    <button onClick={() => toggleLocked()} style={{position: 'fixed', left: 0, top: 40}}>
+      {locked ? 'Unlock' : 'Lock'}
+    </button>
+  );
+};
+
 storiesOf('Side effects|useLockBodyScroll', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useLockBodyScroll.md')} />)
-  .add('Demo', () =>
-    <Demo/>
+  .add('Demo', () => <Demo/>)
+  .add('Two hooks on page', () =>
+    <>
+      <AnotherComponent />
+      <Demo />
+    </>
   )

src/useLockBodyScroll.ts

@@ -1,19 +1,30 @@
-import {useRef, useEffect} from 'react';
-import {isClient} from './util';
-import useUnmount from './useUnmount';
+import {useEffect} from 'react';
 
-const useLockBodyScroll = (enabled: boolean = true) => {
-  const originalOverflow = useRef(
-    isClient ? window.getComputedStyle(document.body).overflow : 'visible'
-  );
+let counter = 0;
+let originalOverflow: string | null = null;
+
+const lock = () => {
+  originalOverflow = window.getComputedStyle(document.body).overflow;
+  document.body.style.overflow = 'hidden';
+};
+
+const unlock = () => {
+  document.body.style.overflow = originalOverflow;
+  originalOverflow = null;
+};
 
-  useEffect(() => {
-    document.body.style.overflow = enabled ? "hidden" : originalOverflow.current;
-  }, [enabled]);
+const increment = () => {
+  counter++;
+  if (counter === 1) lock();
+};
 
-  useUnmount(() => {
-    document.body.style.overflow = originalOverflow.current
-  });
+const decrement = () => {
+  counter--;
+  if (counter === 0) unlock();
+};
+
+const useLockBodyScroll = (enabled: boolean = true) => {
+  useEffect(() => enabled ? (increment(), decrement) : undefined, [enabled]);
 }
 
 export default useLockBodyScroll;