use-scroller 1.0.0 → 1.1.0

package/README.md

@@ -2,7 +2,7 @@
 ![node](https://img.shields.io/node/v/scroll-js)
 ![license](https://img.shields.io/npm/l/scroll-js)
 
-## use-scroll
+## use-scroller
 
 A light-weight library that will allow you to scroll any html element using simple react hooks provided by the package.
 In addition to providing extra scrolling features, this library also return a number of callback that can triger scroll operation depending on the user needs.

package/dist/cjs/hooks/use-scroll.d.ts

@@ -16,4 +16,5 @@ export declare function useScroll<T extends HTMLElement>(props?: Partial<ScrollO
     scrollBottom: (offset?: number) => void;
     scrollTop: (offset?: number) => void;
     scrollCenter: () => void;
+    scroll: (from: number, to: number) => void;
 };

package/dist/cjs/hooks/use-scroll.js

@@ -28,6 +28,11 @@ function useScroll(props) {
         isScrolledBottom: false,
     }); }), state = _a[0], setState = _a[1];
     var scrollOpt = __assign(__assign({}, utils_1.defaultScrollOptions), props);
+    var scroll = (0, react_1.useCallback)(function (from, to) {
+        var container = (0, utils_1.getElement)(ref);
+        var scrollContainer = (0, scroller_1.scroller)({ container: container, options: scrollOpt });
+        scrollContainer.scrollTo(from, to);
+    }, []);
     var scrollCenter = (0, react_1.useCallback)(function () {
         var container = (0, utils_1.getElement)(ref);
         var scrollContainer = (0, scroller_1.scroller)({ container: container, options: scrollOpt });
@@ -79,6 +84,7 @@ function useScroll(props) {
         scrollBottom: scrollBottom,
         scrollTop: scrollTop,
         scrollCenter: scrollCenter,
+        scroll: scroll,
     };
 }
 exports.useScroll = useScroll;

package/dist/cjs/hooks/use-window-scroll.d.ts

@@ -9,4 +9,5 @@ export declare function useWindowScroll(props?: Partial<Omit<ScrollOptions, 'dir
     scrollTop: (offset?: number | undefined) => void;
     scrollBottom: (offset?: number | undefined) => void;
     scrollToTarget: (currentTarget: HTMLElement) => void;
+    scroll: (from: number, to: number) => void;
 };

package/dist/cjs/hooks/use-window-scroll.js

@@ -27,6 +27,10 @@ function useWindowScroll(props) {
         container: window,
         options: __assign(__assign({}, utils_1.defaultScrollOptions), props),
     };
+    var scroll = (0, react_1.useCallback)(function (from, to) {
+        var scrollContainer = (0, scroller_1.scroller)(scrollArgs);
+        scrollContainer.scrollTo(from, to);
+    }, []);
     var scrollToTarget = (0, react_1.useCallback)(function (currentTarget) {
         var scrollContainer = (0, scroller_1.scroller)(scrollArgs);
         scrollContainer.scrollToTarget(currentTarget);
@@ -51,6 +55,6 @@ function useWindowScroll(props) {
         window === null || window === void 0 ? void 0 : window.addEventListener('scroll', handleScroll);
         return function () { return window === null || window === void 0 ? void 0 : window.removeEventListener('scroll', handleScroll); };
     }, []);
-    return { state: state, scrollTop: scrollTop, scrollBottom: scrollBottom, scrollToTarget: scrollToTarget };
+    return { state: state, scrollTop: scrollTop, scrollBottom: scrollBottom, scrollToTarget: scrollToTarget, scroll: scroll };
 }
 exports.useWindowScroll = useWindowScroll;

package/dist/cjs/scroller.d.ts

@@ -6,4 +6,5 @@ export declare function scroller({ container, options }: ScrollerProps): {
     scrollToBottom: (offset?: number) => void;
     scrollToTarget: (target: HTMLElement) => void;
     scrollToCenter: () => void;
+    scrollTo: (from: number, to: number, layout?: 'horizontal' | 'vertical') => void;
 };

package/dist/cjs/scroller.js

@@ -16,6 +16,7 @@ function scroller(_a) {
      * @param {string} layout the scroll direction.
      */
     function scrollTo(from, to, layout) {
+        if (layout === void 0) { layout = direction; }
         var startTime = null;
         var requestId = 0;
         function loop(currentTime) {
@@ -90,6 +91,7 @@ function scroller(_a) {
         scrollToBottom: scrollToBottom,
         scrollToTarget: scrollToTarget,
         scrollToCenter: scrollToCenter,
+        scrollTo: scrollTo,
     };
 }
 exports.scroller = scroller;

package/dist/esm/hooks/use-scroll.d.ts

@@ -16,4 +16,5 @@ export declare function useScroll<T extends HTMLElement>(props?: Partial<ScrollO
     scrollBottom: (offset?: number) => void;
     scrollTop: (offset?: number) => void;
     scrollCenter: () => void;
+    scroll: (from: number, to: number) => void;
 };

package/dist/esm/hooks/use-scroll.js

@@ -25,6 +25,11 @@ export function useScroll(props) {
         isScrolledBottom: false,
     }); }), state = _a[0], setState = _a[1];
     var scrollOpt = __assign(__assign({}, defaultScrollOptions), props);
+    var scroll = useCallback(function (from, to) {
+        var container = getElement(ref);
+        var scrollContainer = scroller({ container: container, options: scrollOpt });
+        scrollContainer.scrollTo(from, to);
+    }, []);
     var scrollCenter = useCallback(function () {
         var container = getElement(ref);
         var scrollContainer = scroller({ container: container, options: scrollOpt });
@@ -76,5 +81,6 @@ export function useScroll(props) {
         scrollBottom: scrollBottom,
         scrollTop: scrollTop,
         scrollCenter: scrollCenter,
+        scroll: scroll,
     };
 }

package/dist/esm/hooks/use-window-scroll.d.ts

@@ -9,4 +9,5 @@ export declare function useWindowScroll(props?: Partial<Omit<ScrollOptions, 'dir
     scrollTop: (offset?: number | undefined) => void;
     scrollBottom: (offset?: number | undefined) => void;
     scrollToTarget: (currentTarget: HTMLElement) => void;
+    scroll: (from: number, to: number) => void;
 };

package/dist/esm/hooks/use-window-scroll.js

@@ -24,6 +24,10 @@ export function useWindowScroll(props) {
         container: window,
         options: __assign(__assign({}, defaultScrollOptions), props),
     };
+    var scroll = useCallback(function (from, to) {
+        var scrollContainer = scroller(scrollArgs);
+        scrollContainer.scrollTo(from, to);
+    }, []);
     var scrollToTarget = useCallback(function (currentTarget) {
         var scrollContainer = scroller(scrollArgs);
         scrollContainer.scrollToTarget(currentTarget);
@@ -48,5 +52,5 @@ export function useWindowScroll(props) {
         window === null || window === void 0 ? void 0 : window.addEventListener('scroll', handleScroll);
         return function () { return window === null || window === void 0 ? void 0 : window.removeEventListener('scroll', handleScroll); };
     }, []);
-    return { state: state, scrollTop: scrollTop, scrollBottom: scrollBottom, scrollToTarget: scrollToTarget };
+    return { state: state, scrollTop: scrollTop, scrollBottom: scrollBottom, scrollToTarget: scrollToTarget, scroll: scroll };
 }

package/dist/esm/scroller.d.ts

@@ -6,4 +6,5 @@ export declare function scroller({ container, options }: ScrollerProps): {
     scrollToBottom: (offset?: number) => void;
     scrollToTarget: (target: HTMLElement) => void;
     scrollToCenter: () => void;
+    scrollTo: (from: number, to: number, layout?: 'horizontal' | 'vertical') => void;
 };

package/dist/esm/scroller.js

@@ -13,6 +13,7 @@ export function scroller(_a) {
      * @param {string} layout the scroll direction.
      */
     function scrollTo(from, to, layout) {
+        if (layout === void 0) { layout = direction; }
         var startTime = null;
         var requestId = 0;
         function loop(currentTime) {
@@ -87,5 +88,6 @@ export function scroller(_a) {
         scrollToBottom: scrollToBottom,
         scrollToTarget: scrollToTarget,
         scrollToCenter: scrollToCenter,
+        scrollTo: scrollTo,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-scroller",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "author": "silvi lila",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -10,6 +10,15 @@
     "dist",
     "src"
   ],
+  "keywords": [
+    "react",
+    "hook",
+    "scroll"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/silvi97lila/use-scroller.git"
+  },
   "scripts": {
     "build": "yarn clean && yarn build:esm && yarn build:cjs",
     "build:watch": "yarn build --watch",
@@ -18,6 +27,7 @@
     "clean": "rm -rf ./dist",
     "test": "jest",
     "lint": "lint ./src/*",
+    "bump": "changeset version",
     "release": "yarn build && changeset publish",
     "changeset": "changeset"
   },

package/src/hooks/use-scroll.ts

@@ -17,6 +17,12 @@ export function useScroll<T extends HTMLElement>(props?: Partial<ScrollOptions>)
   }))
   const scrollOpt = { ...defaultScrollOptions, ...props }
 
+  const scroll = useCallback((from: number, to: number) => {
+    const container = getElement(ref)
+    const scrollContainer = scroller({ container, options: scrollOpt })
+    scrollContainer.scrollTo(from, to)
+  }, [])
+
   const scrollCenter = useCallback(() => {
     const container = getElement(ref)
     const scrollContainer = scroller({ container, options: scrollOpt })
@@ -84,5 +90,6 @@ export function useScroll<T extends HTMLElement>(props?: Partial<ScrollOptions>)
     scrollBottom,
     scrollTop,
     scrollCenter,
+    scroll,
   }
 }

package/src/hooks/use-window-scroll.ts

@@ -16,6 +16,10 @@ export function useWindowScroll(props?: Partial<Omit<ScrollOptions, 'direction'>
     container: window,
     options: { ...defaultScrollOptions, ...props },
   }
+  const scroll = useCallback((from: number, to: number) => {
+    const scrollContainer = scroller(scrollArgs)
+    scrollContainer.scrollTo(from, to)
+  }, [])
 
   const scrollToTarget = useCallback((currentTarget: HTMLElement) => {
     const scrollContainer = scroller(scrollArgs)
@@ -52,5 +56,5 @@ export function useWindowScroll(props?: Partial<Omit<ScrollOptions, 'direction'>
     return () => window?.removeEventListener('scroll', handleScroll)
   }, [])
 
-  return { state, scrollTop, scrollBottom, scrollToTarget }
+  return { state, scrollTop, scrollBottom, scrollToTarget, scroll }
 }

package/src/scroller.ts

@@ -16,7 +16,7 @@ export function scroller({ container, options = defaultScrollOptions }: Scroller
    * @param {number} to the new position to scroll.
    * @param {string} layout the scroll direction.
    */
-  function scrollTo(from: number, to: number, layout: 'horizontal' | 'vertical') {
+  function scrollTo(from: number, to: number, layout: 'horizontal' | 'vertical' = direction) {
     let startTime: number | null = null
     let requestId = 0
 
@@ -105,5 +105,6 @@ export function scroller({ container, options = defaultScrollOptions }: Scroller
     scrollToBottom,
     scrollToTarget,
     scrollToCenter,
+    scrollTo,
   }
 }