use-scroller 1.0.0 → 1.2.0

package/README.md

@@ -1,22 +1,15 @@
-![npm](https://img.shields.io/npm/v/scroll-js)
-![node](https://img.shields.io/node/v/scroll-js)
-![license](https://img.shields.io/npm/l/scroll-js)
+# use-scroller
 
-## use-scroll
+A lightweight library that enables smooth scrolling for HTML elements using simple React hooks provided by the package. This library offers additional scrolling features and provides several callback functions for customizable scroll operations.
 
-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.
-
-<p align="middle">
+<div align="center">
   <img src="https://s9.gifyu.com/images/ezgif.com-gif-maker3092e8916a41884d.gif" width="400"/>
   <img src="https://s3.gifyu.com/images/ezgif.com-gif-maker-1c4ee7c66dcd4dd01.gif" width="400"/>
-</p>
+</div>
 
 ## Installation
 
-### React
-
-```javascript
+```bash
 #YARN
 yarn add use-scroller
 
@@ -30,23 +23,42 @@ pnpm install use-scroller
 
 ## Usage
 
+### Scroll state
+
+```typescript
+import { useScroll } from 'use-scroller'
+
+export default function ScrollStateExample() {
+  const { ref, state } = useScroll<HTMLDivElement>()
+
+  return (
+    <>
+      <p>Scroll State:</p>
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+      <div ref={ref} style={{ height: '200px', overflowY: 'scroll' }}>
+        {/* Your content */}
+      </div>
+    </>
+  )
+}
+```
+
 ### Carousel
 
-```javascript
+```typescript
 import { useScroll } from 'use-scroller'
 
-export default function Carousel() {
+export default function CarouselExample() {
   const { ref, scrollLeft, scrollRight } = useScroll<HTMLDivElement>()
+
   return (
     <>
-      <button onClick={() => scrollLeft()} >
-        Top
-      </button>
-      <button onClick={() => scrollRight()}>
-        Next
-      </button>
-
-      <Box ref={ref} />
+      <button onClick={() => scrollLeft()}>Scroll Left</button>
+      <button onClick={() => scrollRight()}>Scroll Right</button>
+
+      <div ref={ref} style={{ width: '400px', overflowX: 'scroll' }}>
+        {/* Your carousel content */}
+      </div>
     </>
   )
 }
@@ -54,30 +66,56 @@ export default function Carousel() {
 
 ### Box
 
-```javascript
+```typescript
 import { useScroll } from 'use-scroller'
 
-export default function ScrollBox() {
-  const { ref, scrollLeft, scrollRight, scrollTop, scrollBotom, scrollCenter } = useScroll<HTMLDivElement>()
+export default function BoxExample() {
+  const { ref, scrollLeft, scrollRight, scrollTop, scrollBottom, scrollToCenter } =
+    useScroll<HTMLDivElement>()
+
   return (
     <>
-      <button onClick={() => scrollCenter()} >
-        Center
-      </button>
-      <button onClick={() => scrollLeft()} >
-        Left
-      </button>
-      <button onClick={() => scrollRight()}>
-        Right
-      </button>
-      <button onClick={() => scrollTop()}>
-        Top
-      </button>
-      <button onClick={() => scrollBotom()}>
-        Bottom
-      </button>
-      # Box component
-      <Box ref={ref} />
+      <button onClick={() => scrollToCenter()}>Scroll to Center</button>
+      <button onClick={() => scrollLeft()}>Scroll Left</button>
+      <button onClick={() => scrollRight()}>Scroll Right</button>
+      <button onClick={() => scrollTop()}>Scroll to Top</button>
+      <button onClick={() => scrollBottom()}>Scroll to Bottom</button>
+      <div ref={ref} style={{ width: '300px', height: '300px', overflow: 'scroll' }}>
+        {/* Your content */}
+      </div>
+    </>
+  )
+}
+```
+
+### Scroll to target
+
+```typescript
+import { useWindowScroll } from 'use-scroller'
+
+export default function ScrollToTargetExample() {
+  const { scrollToTarget } = useWindowScroll()
+  const ref1 = useRef(null)
+  const ref2 = useRef(null)
+  const ref3 = useRef(null)
+
+  return (
+    <>
+      <button onClick={() => scrollToTarget(ref1)}>Scroll to Target 1</button>
+      <button onClick={() => scrollToTarget(ref2)}>Scroll to Target 2</button>
+      <button onClick={() => scrollToTarget(ref3)}>Scroll to Target 3</button>
+
+      <div>
+        <div ref={ref1} style={{ height: '400px', backgroundColor: 'lightcoral' }}>
+          Target 1
+        </div>
+        <div ref={ref2} style={{ height: '400px', backgroundColor: 'lightseagreen' }}>
+          Target 2
+        </div>
+        <div ref={ref3} style={{ height: '400px', backgroundColor: 'lightsalmon' }}>
+          Target 3
+        </div>
+      </div>
     </>
   )
 }
@@ -85,24 +123,28 @@ export default function ScrollBox() {
 
 ## API Documentation
 
-#### Available hooks
+### Available Hooks
+
+#### `useScroll`
+
+This hook is designed to handle element scroll events, enabling smooth scrolling for specified HTML elements.
+
+##### Options
+
+- `direction` (Type: `horizontal` or `vertical`, Default: `vertical`): Specifies the desired scroll direction. You can set it to `horizontal` or `vertical` based on your needs.
+
+- `duration` (Type: `number`, Default: `300`): Sets the animation duration for scrolling. Adjust this value to control the speed of the scroll animation.
+
+- `easingOption` (Type: `EasingOptions`, Default: `ease-in-out`): Determines the type of animation to use for scrolling. You can choose from various easing options such as `ease-in`, `ease-out`, `ease-in-out`, etc., to customize the scroll animation's behavior.
+
+#### `useWindowScroll`
 
-| Hook              | Description                   |
-| ----------------- | ----------------------------- |
-| `useScroll`       | Handles element scroll events |
-| `useWindowScroll` | Handles window scroll events  |
+This hook is tailored to handle window scroll events, making it easy to manage scrolling operations within the entire window.
 
-#### useScroll(options)
+##### Options
 
-| Option         | Type                     | Description                          |
-| -------------- | ------------------------ | ------------------------------------ |
-| `direction`    | `horizontal or vertical` | Set the desired scroll direction     |
-| `duration`     | `number`                 | Set the animation duration to scroll |
-| `easingOption` | `EasingOptions`          | Set the type of animation to scroll  |
+- `duration` (Type: `number`, Default: `300`): Specifies the animation duration for scrolling operations. Adjust this value to control the speed of the scroll animation.
 
-#### useWindowScroll(options)
+- `easingOption` (Type: `EasingOptions`, Default: `ease-in-out`): Defines the type of animation to use for scrolling within the window. You can choose from various easing options to customize the scroll animation's behavior.
 
-| Option         | Type            | Description                          |
-| -------------- | --------------- | ------------------------------------ |
-| `duration`     | `number`        | Set the animation duration to scroll |
-| `easingOption` | `EasingOptions` | Set the type of animation to scroll  |
+Feel free to update and expand this documentation further based on your library's features and usage patterns.

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

@@ -10,10 +10,15 @@ export declare function useScroll<T extends HTMLElement>(props?: Partial<ScrollO
         isScrolledRight: boolean;
         isScrolledTop: boolean;
         isScrolledBottom: boolean;
+        maxScrollLeft: number;
+        maxScrollTop: number;
+        scrollPercentageX: number;
+        scrollPercentageY: number;
     };
-    scrollLeft: (offset?: number) => void;
-    scrollRight: (offset?: number) => void;
-    scrollBottom: (offset?: number) => void;
-    scrollTop: (offset?: number) => void;
-    scrollCenter: () => void;
+    scrollLeft: ((offset?: number | undefined) => void) | undefined;
+    scrollRight: ((offset?: number | undefined) => void) | undefined;
+    scrollBottom: ((offset?: number | undefined) => void) | undefined;
+    scrollTop: ((offset?: number | undefined) => void) | undefined;
+    scrollCenter: (() => void) | undefined;
+    scrollTo: ((to: number) => void) | undefined;
 };

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

@@ -16,69 +16,65 @@ var react_1 = require("react");
 var scroller_1 = require("../scroller");
 var utils_1 = require("../utils");
 var use_iso_morphic_effect_1 = require("./use-iso-morphic-effect");
+var initialState = {
+    left: 0,
+    top: 0,
+    isScrollable: false,
+    isScrolledLeft: true,
+    isScrolledRight: false,
+    isScrolledTop: true,
+    isScrolledBottom: false,
+    maxScrollLeft: 0,
+    maxScrollTop: 0,
+    scrollPercentageX: 0,
+    scrollPercentageY: 0, // Percentage of vertical scroll covered
+};
 function useScroll(props) {
+    var _a, _b, _c, _d, _e, _f;
     var ref = (0, react_1.useRef)(null);
-    var _a = (0, react_1.useState)(function () { return ({
-        left: 0,
-        top: 0,
-        isScrollable: false,
-        isScrolledLeft: false,
-        isScrolledRight: false,
-        isScrolledTop: false,
-        isScrolledBottom: false,
-    }); }), state = _a[0], setState = _a[1];
     var scrollOpt = __assign(__assign({}, utils_1.defaultScrollOptions), props);
-    var scrollCenter = (0, react_1.useCallback)(function () {
-        var container = (0, utils_1.getElement)(ref);
-        var scrollContainer = (0, scroller_1.scroller)({ container: container, options: scrollOpt });
-        scrollContainer.scrollToCenter();
-    }, []);
-    var scrollTop = (0, react_1.useCallback)(function (offset) {
-        var container = (0, utils_1.getElement)(ref);
-        var scrollContainer = (0, scroller_1.scroller)({ container: container, options: scrollOpt });
-        scrollContainer.scrollToTop(offset);
-    }, []);
-    var scrollBottom = (0, react_1.useCallback)(function (offset) {
-        var container = (0, utils_1.getElement)(ref);
-        var scrollContainer = (0, scroller_1.scroller)({ container: container, options: scrollOpt });
-        scrollContainer.scrollToBottom(offset);
-    }, []);
-    var scrollRight = (0, react_1.useCallback)(function (offset) {
-        var container = (0, utils_1.getElement)(ref);
-        var scrollContainer = (0, scroller_1.scroller)({ container: container, options: scrollOpt });
-        scrollContainer.scrollToRight(offset);
-    }, []);
-    var scrollLeft = (0, react_1.useCallback)(function (offset) {
-        var container = (0, utils_1.getElement)(ref);
-        var scrollContainer = (0, scroller_1.scroller)({ container: container, options: scrollOpt });
-        scrollContainer.scrollToLeft(offset);
-    }, []);
+    var scrollerRef = (0, react_1.useRef)(null);
+    var _g = (0, react_1.useState)(function () { return initialState; }), state = _g[0], setState = _g[1];
     (0, use_iso_morphic_effect_1.useIsoMorphicEffect)(function () {
         var scrollContainer = ref.current;
         if (!scrollContainer)
             return;
+        // Create the scroller instance only once inside the effect
+        if (!scrollerRef.current) {
+            var container = (0, utils_1.getElement)(ref);
+            scrollerRef.current = (0, scroller_1.createScroller)(container, scrollOpt);
+        }
         var scrollWidth = scrollContainer.scrollWidth, clientWidth = scrollContainer.clientWidth, clientHeight = scrollContainer.clientHeight, scrollHeight = scrollContainer.scrollHeight;
         var isScrollable = clientWidth !== scrollWidth || clientHeight !== scrollHeight;
         setState(function (prev) { return (__assign(__assign({}, prev), { isScrollable: isScrollable })); });
         var handleScroll = function () {
             if (scrollContainer) {
-                var scrollLeft_1 = scrollContainer.scrollLeft, scrollTop_1 = scrollContainer.scrollTop;
-                var scrollState = __assign(__assign({}, state), { isScrolledLeft: scrollLeft_1 === 0, isScrolledRight: scrollLeft_1 >= scrollWidth - clientWidth, isScrolledTop: scrollTop_1 === 0, isScrolledBottom: scrollTop_1 >= scrollHeight - clientHeight, left: scrollLeft_1, top: scrollTop_1 });
+                var scrollLeft = scrollContainer.scrollLeft, scrollTop = scrollContainer.scrollTop;
+                var isAtLeftBoundary = scrollLeft === 0;
+                var isAtRightBoundary = scrollLeft >= scrollWidth - clientWidth;
+                var isAtTopBoundary = scrollTop === 0;
+                var isAtBottomBoundary = scrollTop >= scrollHeight - clientHeight;
+                var scrollState = __assign(__assign({}, state), { isScrolledLeft: isAtLeftBoundary, isScrolledRight: isAtRightBoundary, isScrolledTop: isAtTopBoundary, isScrolledBottom: isAtBottomBoundary, left: scrollLeft, top: scrollTop, maxScrollLeft: scrollWidth - clientWidth, maxScrollTop: scrollHeight - clientHeight, scrollPercentageX: isAtLeftBoundary
+                        ? 0
+                        : (scrollLeft / (scrollWidth - clientWidth)) * 100, scrollPercentageY: isAtTopBoundary
+                        ? 0
+                        : (scrollTop / (scrollHeight - clientHeight)) * 100 });
                 setState(scrollState);
             }
         };
         handleScroll();
         scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener('scroll', handleScroll);
         return function () { return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener('scroll', handleScroll); };
-    }, []);
+    }, [state]);
     return {
         ref: ref,
         state: state,
-        scrollLeft: scrollLeft,
-        scrollRight: scrollRight,
-        scrollBottom: scrollBottom,
-        scrollTop: scrollTop,
-        scrollCenter: scrollCenter,
+        scrollLeft: (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToLeft,
+        scrollRight: (_b = scrollerRef.current) === null || _b === void 0 ? void 0 : _b.scrollToRight,
+        scrollBottom: (_c = scrollerRef.current) === null || _c === void 0 ? void 0 : _c.scrollToBottom,
+        scrollTop: (_d = scrollerRef.current) === null || _d === void 0 ? void 0 : _d.scrollToTop,
+        scrollCenter: (_e = scrollerRef.current) === null || _e === void 0 ? void 0 : _e.scrollToCenter,
+        scrollTo: (_f = scrollerRef.current) === null || _f === void 0 ? void 0 : _f.scrollTo,
     };
 }
 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;
+    scrollTo: (position: number) => void;
 };

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

@@ -23,34 +23,40 @@ function useWindowScroll(props) {
         isScrolledTop: false,
         isScrolledBottom: false,
     }); }), state = _a[0], setState = _a[1];
-    var scrollArgs = {
-        container: window,
-        options: __assign(__assign({}, utils_1.defaultScrollOptions), props),
-    };
+    var container = window;
+    var scrollOptions = __assign(__assign({}, utils_1.defaultScrollOptions), props);
+    var scrollContainer = (0, scroller_1.createScroller)(container, scrollOptions);
+    var handleScroll = (0, react_1.useCallback)(function () {
+        var _a = (0, utils_1.resolveScrollValues)(container), scrollLeft = _a.scrollLeft, scrollTop = _a.scrollTop, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight;
+        var isAtTopBoundary = scrollTop === 0;
+        var isAtBottomBoundary = scrollTop >= scrollHeight - clientHeight;
+        var scrollState = {
+            left: scrollLeft,
+            top: scrollTop,
+            isScrolledTop: isAtTopBoundary,
+            isScrolledBottom: isAtBottomBoundary,
+        };
+        setState(scrollState);
+    }, [container]);
+    (0, use_iso_morphic_effect_1.useIsoMorphicEffect)(function () {
+        handleScroll();
+        container.addEventListener('scroll', handleScroll);
+        return function () {
+            container.removeEventListener('scroll', handleScroll);
+        };
+    }, [handleScroll]);
+    var scrollTo = (0, react_1.useCallback)(function (position) {
+        scrollContainer.scrollTo(position);
+    }, [scrollContainer]);
     var scrollToTarget = (0, react_1.useCallback)(function (currentTarget) {
-        var scrollContainer = (0, scroller_1.scroller)(scrollArgs);
         scrollContainer.scrollToTarget(currentTarget);
-    }, []);
+    }, [scrollContainer]);
     var scrollTop = (0, react_1.useCallback)(function (offset) {
-        var scrollContainer = (0, scroller_1.scroller)(scrollArgs);
         scrollContainer.scrollToTop(offset);
-    }, []);
+    }, [scrollContainer]);
     var scrollBottom = (0, react_1.useCallback)(function (offset) {
-        var scrollContainer = (0, scroller_1.scroller)(scrollArgs);
         scrollContainer.scrollToBottom(offset);
-    }, []);
-    (0, use_iso_morphic_effect_1.useIsoMorphicEffect)(function () {
-        var handleScroll = function () {
-            if (window) {
-                var _a = (0, utils_1.resolveScrollValues)(window), scrollLeft = _a.scrollLeft, scrollTop_1 = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-                var scrollState = __assign(__assign({}, state), { isScrolledTop: scrollTop_1 === 0, isScrolledBottom: scrollTop_1 >= scrollHeight - clientHeight, left: scrollLeft, top: scrollTop_1 });
-                setState(scrollState);
-            }
-        };
-        handleScroll();
-        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 };
+    }, [scrollContainer]);
+    return { state: state, scrollTop: scrollTop, scrollBottom: scrollBottom, scrollToTarget: scrollToTarget, scrollTo: scrollTo };
 }
 exports.useWindowScroll = useWindowScroll;

package/dist/cjs/scroller.d.ts

@@ -1,9 +1,10 @@
-import { ScrollerProps } from './types';
-export declare function scroller({ container, options }: ScrollerProps): {
+import { ScrollOptions } from './types';
+export declare function createScroller(container: HTMLElement | Window, options?: ScrollOptions): {
+    scrollTo: (to: number) => void;
+    scrollToCenter: () => void;
+    scrollToTarget: (target: HTMLElement, offset?: number) => void;
     scrollToLeft: (offset?: number) => void;
     scrollToRight: (offset?: number) => void;
     scrollToTop: (offset?: number) => void;
     scrollToBottom: (offset?: number) => void;
-    scrollToTarget: (target: HTMLElement) => void;
-    scrollToCenter: () => void;
 };

package/dist/cjs/scroller.js

@@ -1,41 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.scroller = void 0;
+exports.createScroller = void 0;
 var utils_1 = require("./utils");
-function scroller(_a) {
-    var container = _a.container, _b = _a.options, options = _b === void 0 ? utils_1.defaultScrollOptions : _b;
+function createScroller(container, options) {
+    if (options === void 0) { options = utils_1.defaultScrollOptions; }
     (0, utils_1.validateElement)(container);
     var duration = options.duration, easingOption = options.easingOption, direction = options.direction;
-    var _c = (0, utils_1.resolveScrollValues)(container), scrollLeft = _c.scrollLeft, scrollTop = _c.scrollTop, clientWidth = _c.clientWidth, clientHeight = _c.clientHeight, scrollWidth = _c.scrollWidth, scrollHeight = _c.scrollHeight;
-    /**
-     * Scroll the Element or Window to the given
-     * position.
-     *
-     * @param {number} from the current scroll position.
-     * @param {number} to the new position to scroll.
-     * @param {string} layout the scroll direction.
-     */
-    function scrollTo(from, to, layout) {
+    var _a = (0, utils_1.resolveScrollValues)(container), scrollLeft = _a.scrollLeft, scrollTop = _a.scrollTop, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight, scrollWidth = _a.scrollWidth, scrollHeight = _a.scrollHeight;
+    function scroll(from, to, layout) {
+        if (layout === void 0) { layout = direction; }
         var startTime = null;
         var requestId = 0;
-        function loop(currentTime) {
-            if (!startTime)
-                startTime = currentTime;
-            var time = Math.min((currentTime - startTime) / duration, 1);
+        var distance = Math.abs(to - from);
+        function calculateCurrentPosition(timeFraction) {
             var easingFunc = (0, utils_1.getEasing)(easingOption);
-            var currentPositionInTime = easingFunc(time) * (to - from) + from;
+            return easingFunc(timeFraction) * distance + from;
+        }
+        function updateScrollPosition(currentPosition) {
             container.scrollTo({
-                left: layout === 'horizontal' ? currentPositionInTime : undefined,
-                top: layout === 'vertical' ? currentPositionInTime : undefined,
+                left: layout === 'horizontal' ? currentPosition : undefined,
+                top: layout === 'vertical' ? currentPosition : undefined,
             });
-            if (time < 1) {
-                requestId = requestAnimationFrame(loop);
+        }
+        function animateScroll(currentTime) {
+            if (!startTime)
+                startTime = currentTime;
+            var elapsedTime = currentTime - startTime;
+            var timeFraction = elapsedTime / duration;
+            var currentPosition = calculateCurrentPosition(timeFraction);
+            updateScrollPosition(currentPosition);
+            if (timeFraction < 1) {
+                requestId = requestAnimationFrame(animateScroll);
             }
             else {
                 cancelAnimationFrame(requestId);
             }
         }
-        requestId = requestAnimationFrame(loop);
+        requestId = requestAnimationFrame(animateScroll);
+    }
+    function scrollTo(to) {
+        var from = direction === 'vertical' ? scrollTop : scrollLeft;
+        scroll(from, to);
     }
     function scrollToCenter() {
         var from = 0;
@@ -50,46 +55,40 @@ function scroller(_a) {
             from = scrollLeft;
             to = scrollXCenterPosition;
         }
-        scrollTo(from, to, direction);
+        scroll(from, to, direction);
     }
-    function scrollToTarget(target) {
+    function scrollToTarget(target, offset) {
+        if (offset === void 0) { offset = 0; }
         (0, utils_1.validateElement)(target);
         var offsetTop = target.offsetTop, offsetLeft = target.offsetLeft;
         var from = 0;
         var to = 0;
         if (direction === 'vertical') {
             from = scrollTop;
-            to = offsetTop;
+            to = offsetTop - offset;
         }
         if (direction === 'horizontal') {
             from = scrollLeft;
-            to = offsetLeft;
+            to = offsetLeft - offset;
         }
-        scrollTo(from, to, direction);
+        scroll(from, to, direction);
     }
-    var scrollToLeft = function (offset) {
-        var scrollPosition = offset || scrollLeft - clientWidth;
-        scrollTo(scrollLeft, scrollPosition, 'horizontal');
-    };
-    var scrollToRight = function (offset) {
-        var scrollPosition = offset || scrollLeft + clientWidth;
-        scrollTo(scrollLeft, scrollPosition, 'horizontal');
-    };
-    var scrollToTop = function (offset) {
-        var scrollPosition = offset || scrollTop - clientHeight;
-        scrollTo(scrollTop, scrollPosition, 'vertical');
-    };
-    var scrollToBottom = function (offset) {
-        var scrollPosition = offset || scrollTop + clientHeight;
-        scrollTo(scrollTop, scrollPosition, 'vertical');
-    };
     return {
-        scrollToLeft: scrollToLeft,
-        scrollToRight: scrollToRight,
-        scrollToTop: scrollToTop,
-        scrollToBottom: scrollToBottom,
-        scrollToTarget: scrollToTarget,
+        scrollTo: scrollTo,
         scrollToCenter: scrollToCenter,
+        scrollToTarget: scrollToTarget,
+        scrollToLeft: function (offset) {
+            scroll(scrollLeft, offset || scrollLeft - clientWidth, 'horizontal');
+        },
+        scrollToRight: function (offset) {
+            scroll(scrollLeft, offset || scrollLeft + clientWidth, 'horizontal');
+        },
+        scrollToTop: function (offset) {
+            scroll(scrollTop, offset || scrollTop - clientHeight, 'vertical');
+        },
+        scrollToBottom: function (offset) {
+            scroll(scrollTop, offset || scrollTop + clientHeight, 'vertical');
+        },
     };
 }
-exports.scroller = scroller;
+exports.createScroller = createScroller;

package/dist/cjs/utils.d.ts

@@ -3,8 +3,9 @@ import { EasingFunction, EasingFunctions, EasingOptions, ScrollOptions } from '.
 export declare const isServer: boolean;
 export declare const defaultScrollOptions: ScrollOptions;
 /**
- * Resolves scroll values based on the type of param.
- * @param {HTMLElement | Window} element
+ * Resolves scroll values based on the type of element.
+ * @param {HTMLElement | Window} element - The element to retrieve scroll values from.
+ * @returns {object} - An object containing scroll-related properties.
  */
 export declare const resolveScrollValues: (element: HTMLElement | Window) => {
     scrollLeft: number;
@@ -13,12 +14,24 @@ export declare const resolveScrollValues: (element: HTMLElement | Window) => {
     clientWidth: number;
     clientHeight: number;
     scrollHeight: number;
+    scrollLeftMax: number;
+    scrollTopMax: number;
 };
 /**
- * Validate if element passed to the function is valid.
- * @param {HTMLElement | Window} element
+ * Validate if the element passed to the function is valid.
+ * @param {HTMLElement | Window} element - The element to validate.
  */
 export declare function validateElement(element?: HTMLElement | Window): void;
+/**
+ * Get the DOM element from a React ref object.
+ * @param {RefObject<HTMLElement>} ref - The React ref object.
+ * @returns {HTMLElement} - The DOM element.
+ */
 export declare const getElement: (ref: RefObject<HTMLElement>) => HTMLElement;
 export declare const easingMap: EasingFunctions;
+/**
+ * Get an easing function based on the provided easing option or the default option.
+ * @param {EasingOptions} easing - The easing option.
+ * @returns {EasingFunction} - The easing function.
+ */
 export declare const getEasing: (easing?: EasingOptions) => EasingFunction;