feat: support some state return from hook

Author: ron0115

README.md

@@ -2,17 +2,21 @@
 
 This is a hook to control your scrollbar in react component!
 
-**Live demo is <a target="_blank" href="https://codesandbox.io/s/react-smooth-scroll-hook-vhudw?file=/src/App.js" >Here</a>.**
-
 Basically; `useSmoothScroll` hook checks the `HTMLElement`'s API `scrollTo`, otherwise, use `requestAnimationFrame` to finish smooth scroll behaviour!
 
 If you want to control the `speed` of scroll behaviour, it defaults to use `requestAnimationFrame` mode.
 
+**Examples are <a target="_blank" href="https://ron0115.best/react-smooth-scroll-hook/?path=/docs/hooks-usesmoothscroll--direction-x#basic" >Here</a>.**(Storybook)
+
+**Live demo is <a target="_blank" href="https://codesandbox.io/s/react-smooth-scroll-hook-vhudw?file=/src/App.js" >Here</a>.**(Codesandbox)
+
 ## Feature
 
-- You don't need to warn about compatibility, it use rAF api on low version browsers.
-- Provide `speed` on your demand, otherwise it would use the native API `element.scrollTo`.
-- Provide `direction` option ,you can set `x` for vertical, `y` for horizontal.
+- 🚀 You don't need to warn about compatibility, it use `requsetAnimationFrame` api to finish smooth scroll behaviour.
+
+- 👉 Provide `direction` option ,you can set `x` for vertical, `y` for horizontal.
+
+- 💧 No Third Party dependencies, light and pure.
 
 ## Installation
 
@@ -65,7 +69,18 @@ export const Demo = () => {
 
 ### Returns of Hook
 
-- `scrollTo(string | number)`
+- **scrollTo** `(string|number) => void`
 
   - Pass `number`: the distance to scroll, e.g. `scrollTo(400)`
   - Pass `string`: the element seletor you want to scrollTo, passing to `document.querySelector`, e.g. `scrollTo('#your-dom-id')`
+
+- **reachTop** `boolean`: Whether it is reach top of scrollContainer
+
+- **reachBottom** `boolean`: Whether it is reach bottom of scrollContainer
+
+- **scrollToPage** `(number) => void`: Pass page(`number`), which scroll to a distance as multiples of container size(`offsetWidth`/`offsetHeight`)
+  .e.g `scrollToPage(1)`,`scrollToPage(-1)`
+
+- **refreshState** `() => void`: Manually refresh the state of `reachTop` and `reachBottom`, just an API as you need, and possibly useful in some situation.
+
+- **refreshSize** `() => void`: Manually refresh the size of ref container, just an API as you need, and possibly useful in some situation.

package.json

@@ -15,11 +15,6 @@
   "engines": {
     "node": ">=10"
   },
-  "homepage": "https://ron0115.best/react-smooth-scroll-hook/",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ron0115/react-smooth-scroll-hook.git"
-  },
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",

src/index.tsx

@@ -1,4 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useEffect } from 'react';
+
+function debounce(cb: Function, delay = 100) {
+  let timer: NodeJS.Timeout;
+  return function(...args: any) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const _this = this;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      cb.apply(_this, args);
+    }, delay);
+  };
+}
+
 export enum Direction {
   X = 'x',
   Y = 'y',
@@ -24,7 +40,7 @@ export type AttrMapType = {
 };
 // get the relative distance from destination
 const getRelativeDistance = (
-  target: number | string,
+  target: number | string | undefined,
   parent: HTMLElement,
   attrMap: AttrMapType
 ) => {
@@ -45,7 +61,7 @@ const getRelativeDistance = (
 
 export const useSmoothScroll = ({
   ref,
-  speed,
+  speed = 100,
   direction = Direction.Y,
   threshold = 1,
 }: UseSmoothScrollType) => {
@@ -61,7 +77,41 @@ export const useSmoothScroll = ({
       Direction.X === direction ? 'clientWidth' : 'clientHeight',
   };
 
-  const scrollTo = (target: number | string) => {
+  const [reachTop, setReachTop] = useState(true);
+  const [reachBottom, setReachBottom] = useState(true);
+  const [size, setSize] = useState(0);
+
+  const isTopEdge = () => {
+    const elm = ref.current;
+    if (!elm) return false;
+    return elm[attrMap.scrollLeftTop] === 0;
+  };
+
+  const isBottomEdge = () => {
+    const elm = ref.current;
+    if (!elm) return false;
+    return (
+      Math.abs(
+        elm[attrMap.scrollLeftTop] +
+          elm[attrMap.clientWidthHeight] -
+          elm[attrMap.scrollWidthHeight]
+      ) < threshold
+    );
+  };
+
+  const refreshSize = debounce(() => {
+    if (ref.current) {
+      const size = ref.current[attrMap.clientWidthHeight];
+      setSize(size);
+    }
+  });
+
+  const refreshState = debounce((_evt: Event) => {
+    isTopEdge() ? setReachTop(true) : setReachTop(false);
+    isBottomEdge() ? setReachBottom(true) : setReachBottom(false);
+  });
+
+  const scrollTo = (target?: number | string) => {
     if (!ref || !ref.current) {
       console.warn(
         'Please pass `ref` property for your scroll container! \n Get more info at https://github.com/ron0115/react-smooth-scroll-hook'
@@ -70,55 +120,103 @@ export const useSmoothScroll = ({
     }
     const elm = ref.current;
     if (!elm) return;
-    if (!target) {
+    if (!target && typeof target !== 'number') {
       console.warn(
         'Please pass a valid property for `scrollTo()`! \n Get more info at https://github.com/ron0115/react-smooth-scroll-hook'
       );
     }
     const initScrollLeftTop = elm[attrMap.scrollLeftTop];
     const distance = getRelativeDistance(target, elm, attrMap);
 
-    if (distance === 0) return;
-
-    if (elm.scrollTo && !speed) {
-      elm.scrollTo({
-        [attrMap.leftTop]: elm[attrMap.scrollLeftTop] + distance,
-        behavior: 'smooth',
-      });
-    } else {
-      let _speed = speed || 100;
-      const cb = () => {
-        // scroll to edge
-        if (
-          distance > 0
-            ? elm[attrMap.scrollLeftTop] + elm[attrMap.clientWidthHeight] >=
-              elm[attrMap.scrollWidthHeight]
-            : elm[attrMap.scrollLeftTop] === 0
-        ) {
-          return;
-        }
-        const gone = () =>
-          Math.abs(elm[attrMap.scrollLeftTop] - initScrollLeftTop);
+    let _speed = speed;
+    const cb = () => {
+      refreshState();
 
-        if (Math.abs(distance) - gone() < _speed) {
-          _speed = Math.abs(distance) - gone();
-        }
+      if (distance === 0) return;
 
-        // distance to run every frame，always 1/60s
-        elm[attrMap.scrollLeftTop] += _speed * (distance > 0 ? 1 : -1);
+      if ((isBottomEdge() && distance > 9) || (distance < 0 && isTopEdge()))
+        return;
 
-        // reach destination, threshold defaults to 1
-        if (Math.abs(gone() - Math.abs(distance)) < threshold) {
-          return;
-        }
+      const gone = () =>
+        Math.abs(elm[attrMap.scrollLeftTop] - initScrollLeftTop);
+
+      if (Math.abs(distance) - gone() < _speed) {
+        _speed = Math.abs(distance) - gone();
+      }
+
+      // distance to run every frame，always 1/60s
+      elm[attrMap.scrollLeftTop] += _speed * (distance > 0 ? 1 : -1);
+
+      // reach destination, threshold defaults to 1
+      if (Math.abs(gone() - Math.abs(distance)) < threshold) {
+        return;
+      }
 
-        requestAnimationFrame(cb);
-      };
       requestAnimationFrame(cb);
-    }
+    };
+    requestAnimationFrame(cb);
   };
+
+  // detect dom changes
+  useEffect(() => {
+    if (!ref.current) return;
+    refreshState();
+    refreshSize();
+    const observer = new MutationObserver((mutationsList, _observer) => {
+      // Use traditional 'for loops' for IE 11
+      for (const mutation of mutationsList) {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.target instanceof Element
+        ) {
+          refreshSize();
+        }
+      }
+    });
+    observer.observe(ref.current, {
+      attributes: true,
+    });
+    window.addEventListener('resize', refreshSize);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', refreshSize);
+    };
+  }, [ref]);
+
+  // detect scrollbar changes
+  useEffect(() => {
+    if (!ref.current) return;
+    const observer = new MutationObserver((mutationsList, _observer) => {
+      // Use traditional 'for loops' for IE 11
+      for (const mutation of mutationsList) {
+        if (
+          mutation.type === 'childList' &&
+          mutation.target instanceof Element
+        ) {
+          refreshState();
+        }
+      }
+    });
+    observer.observe(ref.current, {
+      childList: true,
+      subtree: true,
+    });
+    ref.current.addEventListener('scroll', refreshState);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('scroll', refreshState);
+    };
+  }, [ref]);
+
   return {
+    reachTop,
+    reachBottom,
     scrollTo,
+    scrollToPage: (page: number) => {
+      scrollTo(page * size);
+    },
+    refreshState,
+    refreshSize,
   };
 };
 

stories/Demo.stories.tsx

@@ -4,7 +4,7 @@ import { Description } from '@storybook/addon-docs/dist/blocks';
 import './index.css';
 
 export default {
-  title: '@Hooks/useSmoothScroll',
+  title: 'useSmoothScroll',
   component: useSmoothScroll,
 };
 
@@ -51,7 +51,7 @@ Demo.storyName = 'Basic';
 export const DirectionX = () => {
   const [speed, setSpeed] = useState(50);
   const ref = useRef<HTMLDivElement>(null);
-  const { scrollTo } = useSmoothScroll({
+  const { scrollTo, reachTop, reachBottom, scrollToPage } = useSmoothScroll({
     ref,
     direction: 'x',
     speed,
@@ -61,8 +61,8 @@ export const DirectionX = () => {
   };
   return (
     <>
-      <button onClick={() => scrollTo('#x-item-40')}>
-        scrollTo('#x-item-40')
+      <button onClick={() => scrollTo('#x-item-20')}>
+        scrollTo('#x-item-20')
       </button>
       <button onClick={() => scrollTo(Infinity)}>
         scrollTo Edge - scrollTo(Infinity)
@@ -72,18 +72,30 @@ export const DirectionX = () => {
       </button>
       <button onClick={() => scrollTo(100)}>scrollTo(100)</button>
       <button onClick={() => scrollTo(-100)}>scrollTo(-100)</button>
+
       <br />
       <div>
-        speed：
+        speed:{speed}
+        <br />
         <input
           value={speed}
           onChange={onChange}
           type="range"
-          min={50}
+          min={100}
           max={500}
         />
+        <br />
+        reachTop: {String(reachTop)}
+        <br />
+        reachBottom: {String(reachBottom)}
       </div>
       <br />
+      <button disabled={reachBottom} onClick={() => scrollToPage(1)}>
+        scrollToPage(1)
+      </button>
+      <button disabled={reachTop} onClick={() => scrollToPage(-1)}>
+        scrollToPage(-1)
+      </button>
 
       <div
         ref={ref}
@@ -97,7 +109,7 @@ export const DirectionX = () => {
             padding: '10px',
           }}
         >
-          {Array(100)
+          {Array(50)
             .fill(null)
             .map((_item, i) => (
               <div