fix: default to use native scrollTo

Author: ron0115

README.md

@@ -2,17 +2,17 @@
 
 This is a hook to control your scrollbar in react component!
 
-**Live demo is [here](https://ron0115.github.io/react-smooth-scroll-hook/?path=/docs/hooks-usesmoothscroll--docs).**
+**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.
 
 ## Feature
 
-- Provide `scrollTo`, you don't need to warn about compatibility, it use rAF api on low version browsers.
-- Provide `speed` on your demand.
-- Provide direction option ,you can set `x` for vertical, `y` for horizontal.
+- 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.
 
 ## Installation
 
@@ -33,7 +33,7 @@ export const Demo = () => {
 
   return (
     <>
-      <button onClick={() => scrollTo('#y-20')}>scrollTo('#y-20')</button>
+      <button onClick={() => scrollTo('#item-20')}>scrollTo('#item-20')</button>
       <div
         ref={ref}
         style={{
@@ -45,7 +45,7 @@ export const Demo = () => {
           {Array(100)
             .fill(null)
             .map((_item, i) => (
-              <div key={i} id={`y-${i}`}>
+              <div key={i} id={`item-${i}`}>
                 y-{i}
               </div>
             ))}
@@ -59,13 +59,13 @@ export const Demo = () => {
 ## Props
 
 - **ref:** `RefObject<HTMLElement>`, container which set as `overflow: scroll`.
-- **speed:** Distance in one frame to move, useful in `requestAnimationFrame` mode.
+- **speed:** Distance in one frame to move in `requestAnimationFrame` mode, defaults to `100`, if not provide, speed depends on native API `scrollTo`.
 - **direction:** Scroll direction
 - **threshold:** Judge scroll is finished has an error range, .defaults to `1`.
 
-### Props of scrollTo
+### Returns of Hook
 
-`scrollTo(string | number)`
+- `scrollTo(string | number)`
 
-- Pass `number`: the distance to scroll
-- Pass `string`: the element seletor you want to scrollTo, passing to `document.querySelector`, such as `#id`
+  - 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')`

package.json

@@ -7,6 +7,11 @@
     "dist",
     "src"
   ],
+  "homepage": "https://github.com/ron0115/react-smooth-scroll-hook#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ron0115/react-smooth-scroll-hook.git"
+  },
   "engines": {
     "node": ">=10"
   },
@@ -48,7 +53,6 @@
     "@semantic-release/release-notes-generator": "^9.0.1",
     "@storybook/addon-actions": "^6.0.16",
     "@storybook/addon-docs": "^6.0.16",
-    "@storybook/addon-info": "^5.3.19",
     "@storybook/addon-links": "^6.0.16",
     "@storybook/addons": "^6.0.16",
     "@storybook/react": "^6.0.16",

src/index.tsx

@@ -5,7 +5,7 @@ export enum Direction {
 }
 
 export type UseSmoothScrollType = {
-  /** the container RefObject which use `overflow:scroll` */
+  /** the container dom RefObject which use `overflow:scroll` */
   ref: React.RefObject<HTMLElement>;
   /** distance per frame, reflects to speed while scrolling */
   speed?: number;
@@ -28,10 +28,13 @@ const getRelativeDistance = (
   parent: HTMLElement,
   attrMap: AttrMapType
 ) => {
-  if (!target) return 0;
   if (typeof target === 'number') return target;
   if (typeof target === 'string') {
-    const elm = document.querySelector(target) as HTMLElement;
+    const elm = document.querySelector(target);
+    if (!elm) {
+      console.warn('Please pass correct selector string for scrollTo()!');
+      return 0;
+    }
     const dis =
       elm.getBoundingClientRect()[attrMap.leftTop] -
       parent.getBoundingClientRect()[attrMap.leftTop];
@@ -42,7 +45,7 @@ const getRelativeDistance = (
 
 export const useSmoothScroll = ({
   ref,
-  speed = 40,
+  speed,
   direction = Direction.Y,
   threshold = 1,
 }: UseSmoothScrollType) => {
@@ -59,8 +62,19 @@ export const useSmoothScroll = ({
   };
 
   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'
+      );
+      return;
+    }
     const elm = ref.current;
     if (!elm) return;
+    if (!target) {
+      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);
 
@@ -72,7 +86,7 @@ export const useSmoothScroll = ({
         behavior: 'smooth',
       });
     } else {
-      let _speed = speed;
+      let _speed = speed || 100;
       const cb = () => {
         // scroll to edge
         if (
@@ -86,11 +100,11 @@ export const useSmoothScroll = ({
         const gone = () =>
           Math.abs(elm[attrMap.scrollLeftTop] - initScrollLeftTop);
 
-        if (Math.abs(distance) - gone() < speed) {
+        if (Math.abs(distance) - gone() < _speed) {
           _speed = Math.abs(distance) - gone();
         }
 
-        // 每个帧，通常为1/60s内滚动条移动的距离
+        // distance to run every frame，always 1/60s
         elm[attrMap.scrollLeftTop] += _speed * (distance > 0 ? 1 : -1);
 
         // reach destination, threshold defaults to 1

stories/Demo.stories.tsx

@@ -67,6 +67,9 @@ export const DirectionX = () => {
       <button onClick={() => scrollTo(Infinity)}>
         scrollTo Edge - scrollTo(Infinity)
       </button>
+      <button onClick={() => scrollTo(-Infinity)}>
+        scrollTo Edge - scrollTo(-Infinity)
+      </button>
       <button onClick={() => scrollTo(100)}>scrollTo(100)</button>
       <button onClick={() => scrollTo(-100)}>scrollTo(-100)</button>
       <br />