use-scroller 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2023] [Silvi Lila]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,108 @@
+![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-scroll
+
+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">
+  <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>
+
+## Installation
+
+### React
+
+```javascript
+#YARN
+yarn add use-scroller
+
+#NPM
+npm install use-scroller
+
+#PNPM
+pnpm install use-scroller
+
+```
+
+## Usage
+
+### Carousel
+
+```javascript
+import { useScroll } from 'use-scroller'
+
+export default function Carousel() {
+  const { ref, scrollLeft, scrollRight } = useScroll<HTMLDivElement>()
+  return (
+    <>
+      <button onClick={() => scrollLeft()} >
+        Top
+      </button>
+      <button onClick={() => scrollRight()}>
+        Next
+      </button>
+
+      <Box ref={ref} />
+    </>
+  )
+}
+```
+
+### Box
+
+```javascript
+import { useScroll } from 'use-scroller'
+
+export default function ScrollBox() {
+  const { ref, scrollLeft, scrollRight, scrollTop, scrollBotom, scrollCenter } = 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} />
+    </>
+  )
+}
+```
+
+## API Documentation
+
+#### Available hooks
+
+| Hook              | Description                   |
+| ----------------- | ----------------------------- |
+| `useScroll`       | Handles element scroll events |
+| `useWindowScroll` | Handles window scroll events  |
+
+#### useScroll(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  |
+
+#### useWindowScroll(options)
+
+| Option         | Type            | Description                          |
+| -------------- | --------------- | ------------------------------------ |
+| `duration`     | `number`        | Set the animation duration to scroll |
+| `easingOption` | `EasingOptions` | Set the type of animation to scroll  |

package/dist/cjs/hooks/use-iso-morphic-effect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsoMorphicEffect: typeof useEffect;

package/dist/cjs/hooks/use-iso-morphic-effect.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsoMorphicEffect = void 0;
+var react_1 = require("react");
+var utils_1 = require("../utils");
+exports.useIsoMorphicEffect = utils_1.isServer ? react_1.useEffect : react_1.useLayoutEffect;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ScrollOptions } from '../types';
+export declare function useScroll<T extends HTMLElement>(props?: Partial<ScrollOptions>): {
+    ref: import("react").RefObject<T>;
+    state: {
+        left: number;
+        top: number;
+        isScrollable: boolean;
+        isScrolledLeft: boolean;
+        isScrolledRight: boolean;
+        isScrolledTop: boolean;
+        isScrolledBottom: boolean;
+    };
+    scrollLeft: (offset?: number) => void;
+    scrollRight: (offset?: number) => void;
+    scrollBottom: (offset?: number) => void;
+    scrollTop: (offset?: number) => void;
+    scrollCenter: () => void;
+};

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

@@ -0,0 +1,84 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScroll = void 0;
+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");
+function useScroll(props) {
+    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);
+    }, []);
+    (0, use_iso_morphic_effect_1.useIsoMorphicEffect)(function () {
+        var scrollContainer = ref.current;
+        if (!scrollContainer)
+            return;
+        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 });
+                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); };
+    }, []);
+    return {
+        ref: ref,
+        state: state,
+        scrollLeft: scrollLeft,
+        scrollRight: scrollRight,
+        scrollBottom: scrollBottom,
+        scrollTop: scrollTop,
+        scrollCenter: scrollCenter,
+    };
+}
+exports.useScroll = useScroll;

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

@@ -0,0 +1,12 @@
+import { ScrollOptions } from '../types';
+export declare function useWindowScroll(props?: Partial<Omit<ScrollOptions, 'direction'>>): {
+    state: {
+        left: number;
+        top: number;
+        isScrolledTop: boolean;
+        isScrolledBottom: boolean;
+    };
+    scrollTop: (offset?: number | undefined) => void;
+    scrollBottom: (offset?: number | undefined) => void;
+    scrollToTarget: (currentTarget: HTMLElement) => void;
+};

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

@@ -0,0 +1,56 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindowScroll = void 0;
+var react_1 = require("react");
+var scroller_1 = require("../scroller");
+var use_iso_morphic_effect_1 = require("./use-iso-morphic-effect");
+var utils_1 = require("../utils");
+function useWindowScroll(props) {
+    var _a = (0, react_1.useState)(function () { return ({
+        left: 0,
+        top: 0,
+        isScrolledTop: false,
+        isScrolledBottom: false,
+    }); }), state = _a[0], setState = _a[1];
+    var scrollArgs = {
+        container: window,
+        options: __assign(__assign({}, utils_1.defaultScrollOptions), props),
+    };
+    var scrollToTarget = (0, react_1.useCallback)(function (currentTarget) {
+        var scrollContainer = (0, scroller_1.scroller)(scrollArgs);
+        scrollContainer.scrollToTarget(currentTarget);
+    }, []);
+    var scrollTop = (0, react_1.useCallback)(function (offset) {
+        var scrollContainer = (0, scroller_1.scroller)(scrollArgs);
+        scrollContainer.scrollToTop(offset);
+    }, []);
+    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 };
+}
+exports.useWindowScroll = useWindowScroll;

package/dist/cjs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './hooks/use-scroll';
+export * from './hooks/use-window-scroll';

package/dist/cjs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./hooks/use-scroll"), exports);
+__exportStar(require("./hooks/use-window-scroll"), exports);

package/dist/cjs/scroller.d.ts

@@ -0,0 +1,9 @@
+import { ScrollerProps } from './types';
+export declare function scroller({ container, options }: ScrollerProps): {
+    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

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scroller = 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;
+    (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 startTime = null;
+        var requestId = 0;
+        function loop(currentTime) {
+            if (!startTime)
+                startTime = currentTime;
+            var time = Math.min((currentTime - startTime) / duration, 1);
+            var easingFunc = (0, utils_1.getEasing)(easingOption);
+            var currentPositionInTime = easingFunc(time) * (to - from) + from;
+            container.scrollTo({
+                left: layout === 'horizontal' ? currentPositionInTime : undefined,
+                top: layout === 'vertical' ? currentPositionInTime : undefined,
+            });
+            if (time < 1) {
+                requestId = requestAnimationFrame(loop);
+            }
+            else {
+                cancelAnimationFrame(requestId);
+            }
+        }
+        requestId = requestAnimationFrame(loop);
+    }
+    function scrollToCenter() {
+        var from = 0;
+        var to = 0;
+        if (direction === 'vertical') {
+            var scrollYCenterPosition = (scrollHeight - clientHeight) / 2;
+            from = scrollTop;
+            to = scrollYCenterPosition;
+        }
+        if (direction === 'horizontal') {
+            var scrollXCenterPosition = (scrollWidth - clientWidth) / 2;
+            from = scrollLeft;
+            to = scrollXCenterPosition;
+        }
+        scrollTo(from, to, direction);
+    }
+    function scrollToTarget(target) {
+        (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;
+        }
+        if (direction === 'horizontal') {
+            from = scrollLeft;
+            to = offsetLeft;
+        }
+        scrollTo(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,
+        scrollToCenter: scrollToCenter,
+    };
+}
+exports.scroller = scroller;

package/dist/cjs/types.d.ts

@@ -0,0 +1,17 @@
+export type ScrollOptions = {
+    direction: 'horizontal' | 'vertical';
+    duration: number;
+    easingOption: EasingOptions;
+};
+export type ScrollerProps = {
+    container: HTMLElement | Window;
+    options: ScrollOptions;
+};
+export type EasingOptions = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+export type EasingFunction = (t: number) => number;
+export interface EasingFunctions {
+    linear: EasingFunction;
+    'ease-in': EasingFunction;
+    'ease-out': EasingFunction;
+    'ease-in-out': EasingFunction;
+}

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/utils.d.ts

@@ -0,0 +1,24 @@
+import { RefObject } from 'react';
+import { EasingFunction, EasingFunctions, EasingOptions, ScrollOptions } from './types';
+export declare const isServer: boolean;
+export declare const defaultScrollOptions: ScrollOptions;
+/**
+ * Resolves scroll values based on the type of param.
+ * @param {HTMLElement | Window} element
+ */
+export declare const resolveScrollValues: (element: HTMLElement | Window) => {
+    scrollLeft: number;
+    scrollTop: number;
+    scrollWidth: number;
+    clientWidth: number;
+    clientHeight: number;
+    scrollHeight: number;
+};
+/**
+ * Validate if element passed to the function is valid.
+ * @param {HTMLElement | Window} element
+ */
+export declare function validateElement(element?: HTMLElement | Window): void;
+export declare const getElement: (ref: RefObject<HTMLElement>) => HTMLElement;
+export declare const easingMap: EasingFunctions;
+export declare const getEasing: (easing?: EasingOptions) => EasingFunction;

package/dist/cjs/utils.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEasing = exports.easingMap = exports.getElement = exports.validateElement = exports.resolveScrollValues = exports.defaultScrollOptions = exports.isServer = void 0;
+exports.isServer = typeof window === 'undefined' || typeof document === 'undefined';
+exports.defaultScrollOptions = {
+    direction: 'vertical',
+    duration: 300,
+    easingOption: 'ease-in-out',
+};
+/**
+ * Resolves scroll values based on the type of param.
+ * @param {HTMLElement | Window} element
+ */
+var resolveScrollValues = function (element) {
+    if (element === document.body ||
+        element === document.documentElement ||
+        element instanceof Window) {
+        return {
+            scrollLeft: document.body.scrollLeft || document.documentElement.scrollLeft,
+            scrollTop: document.body.scrollTop || document.documentElement.scrollTop,
+            scrollWidth: document.body.scrollWidth || document.documentElement.scrollWidth,
+            clientWidth: document.body.clientWidth || document.documentElement.clientWidth,
+            clientHeight: document.body.clientHeight || document.documentElement.clientHeight,
+            scrollHeight: document.body.scrollHeight || document.documentElement.scrollHeight,
+        };
+    }
+    return {
+        scrollLeft: element.scrollLeft,
+        scrollTop: element.scrollTop,
+        scrollWidth: element.scrollWidth,
+        clientWidth: element.clientWidth,
+        clientHeight: element.clientHeight,
+        scrollHeight: element.scrollHeight,
+    };
+};
+exports.resolveScrollValues = resolveScrollValues;
+/**
+ * Validate if element passed to the function is valid.
+ * @param {HTMLElement | Window} element
+ */
+function validateElement(element) {
+    if (element === undefined) {
+        throw new Error("The element passed to scroller() was undefined");
+    }
+    if (!(element instanceof HTMLElement || Window)) {
+        throw new TypeError("\n      The element passed to scroller() must be a valid element. \n      You passed ".concat(element, ".\n      "));
+    }
+}
+exports.validateElement = validateElement;
+var getElement = function (ref) {
+    if (!ref.current) {
+        throw new Error("Could not resolve ref object: ".concat(ref.current));
+    }
+    return ref.current;
+};
+exports.getElement = getElement;
+exports.easingMap = {
+    linear: function (t) {
+        return t;
+    },
+    'ease-in': function (t) {
+        return t * t;
+    },
+    'ease-out': function (t) {
+        return t * (2 - t);
+    },
+    'ease-in-out': function (t) {
+        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+    },
+};
+var getEasing = function (easing) {
+    var easeFunc = exports.easingMap[easing || exports.defaultScrollOptions.easingOption];
+    if (!easeFunc) {
+        var options = Object.keys(exports.easingMap).join(',');
+        throw new Error("Scroll error: scroller does not support an easing option of \"".concat(easing, "\". Supported options are ").concat(options));
+    }
+    return easeFunc;
+};
+exports.getEasing = getEasing;

package/dist/esm/hooks/use-iso-morphic-effect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsoMorphicEffect: typeof useEffect;

package/dist/esm/hooks/use-iso-morphic-effect.js

@@ -0,0 +1,3 @@
+import { useLayoutEffect, useEffect } from 'react';
+import { isServer } from '../utils';
+export var useIsoMorphicEffect = isServer ? useEffect : useLayoutEffect;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ScrollOptions } from '../types';
+export declare function useScroll<T extends HTMLElement>(props?: Partial<ScrollOptions>): {
+    ref: import("react").RefObject<T>;
+    state: {
+        left: number;
+        top: number;
+        isScrollable: boolean;
+        isScrolledLeft: boolean;
+        isScrolledRight: boolean;
+        isScrolledTop: boolean;
+        isScrolledBottom: boolean;
+    };
+    scrollLeft: (offset?: number) => void;
+    scrollRight: (offset?: number) => void;
+    scrollBottom: (offset?: number) => void;
+    scrollTop: (offset?: number) => void;
+    scrollCenter: () => void;
+};