use-scroller 1.0.0

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

@@ -0,0 +1,80 @@
+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);
+};
+import { useCallback, useRef, useState } from 'react';
+import { scroller } from '../scroller';
+import { defaultScrollOptions, getElement } from '../utils';
+import { useIsoMorphicEffect } from './use-iso-morphic-effect';
+export function useScroll(props) {
+    var ref = useRef(null);
+    var _a = 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({}, defaultScrollOptions), props);
+    var scrollCenter = useCallback(function () {
+        var container = getElement(ref);
+        var scrollContainer = scroller({ container: container, options: scrollOpt });
+        scrollContainer.scrollToCenter();
+    }, []);
+    var scrollTop = useCallback(function (offset) {
+        var container = getElement(ref);
+        var scrollContainer = scroller({ container: container, options: scrollOpt });
+        scrollContainer.scrollToTop(offset);
+    }, []);
+    var scrollBottom = useCallback(function (offset) {
+        var container = getElement(ref);
+        var scrollContainer = scroller({ container: container, options: scrollOpt });
+        scrollContainer.scrollToBottom(offset);
+    }, []);
+    var scrollRight = useCallback(function (offset) {
+        var container = getElement(ref);
+        var scrollContainer = scroller({ container: container, options: scrollOpt });
+        scrollContainer.scrollToRight(offset);
+    }, []);
+    var scrollLeft = useCallback(function (offset) {
+        var container = getElement(ref);
+        var scrollContainer = scroller({ container: container, options: scrollOpt });
+        scrollContainer.scrollToLeft(offset);
+    }, []);
+    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,
+    };
+}

package/dist/esm/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/esm/hooks/use-window-scroll.js

@@ -0,0 +1,52 @@
+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);
+};
+import { useCallback, useState } from 'react';
+import { scroller } from '../scroller';
+import { useIsoMorphicEffect } from './use-iso-morphic-effect';
+import { defaultScrollOptions, resolveScrollValues } from '../utils';
+export function useWindowScroll(props) {
+    var _a = useState(function () { return ({
+        left: 0,
+        top: 0,
+        isScrolledTop: false,
+        isScrolledBottom: false,
+    }); }), state = _a[0], setState = _a[1];
+    var scrollArgs = {
+        container: window,
+        options: __assign(__assign({}, defaultScrollOptions), props),
+    };
+    var scrollToTarget = useCallback(function (currentTarget) {
+        var scrollContainer = scroller(scrollArgs);
+        scrollContainer.scrollToTarget(currentTarget);
+    }, []);
+    var scrollTop = useCallback(function (offset) {
+        var scrollContainer = scroller(scrollArgs);
+        scrollContainer.scrollToTop(offset);
+    }, []);
+    var scrollBottom = useCallback(function (offset) {
+        var scrollContainer = scroller(scrollArgs);
+        scrollContainer.scrollToBottom(offset);
+    }, []);
+    useIsoMorphicEffect(function () {
+        var handleScroll = function () {
+            if (window) {
+                var _a = 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 };
+}

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/dist/esm/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/esm/scroller.js

@@ -0,0 +1,91 @@
+import { defaultScrollOptions, getEasing, resolveScrollValues, validateElement } from './utils';
+export function scroller(_a) {
+    var container = _a.container, _b = _a.options, options = _b === void 0 ? defaultScrollOptions : _b;
+    validateElement(container);
+    var duration = options.duration, easingOption = options.easingOption, direction = options.direction;
+    var _c = 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 = 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) {
+        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,
+    };
+}

package/dist/esm/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/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/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/esm/utils.js

@@ -0,0 +1,72 @@
+export var isServer = typeof window === 'undefined' || typeof document === 'undefined';
+export var defaultScrollOptions = {
+    direction: 'vertical',
+    duration: 300,
+    easingOption: 'ease-in-out',
+};
+/**
+ * Resolves scroll values based on the type of param.
+ * @param {HTMLElement | Window} element
+ */
+export 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,
+    };
+};
+/**
+ * Validate if element passed to the function is valid.
+ * @param {HTMLElement | Window} element
+ */
+export 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      "));
+    }
+}
+export var getElement = function (ref) {
+    if (!ref.current) {
+        throw new Error("Could not resolve ref object: ".concat(ref.current));
+    }
+    return ref.current;
+};
+export var 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;
+    },
+};
+export var getEasing = function (easing) {
+    var easeFunc = easingMap[easing || defaultScrollOptions.easingOption];
+    if (!easeFunc) {
+        var options = Object.keys(easingMap).join(',');
+        throw new Error("Scroll error: scroller does not support an easing option of \"".concat(easing, "\". Supported options are ").concat(options));
+    }
+    return easeFunc;
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "use-scroller",
+  "version": "1.0.0",
+  "author": "silvi lila",
+  "license": "MIT",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "yarn clean && yarn build:esm && yarn build:cjs",
+    "build:watch": "yarn build --watch",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "clean": "rm -rf ./dist",
+    "test": "jest",
+    "lint": "lint ./src/*",
+    "release": "yarn build && changeset publish",
+    "changeset": "changeset"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "peerDependencies": {
+    "react": "^16 || ^17 || ^18",
+    "react-dom": "^16 || ^17 || ^18"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.18.6",
+    "@changesets/cli": "^2.26.0",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.2.3",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
+    "eslint": "^8.28.0",
+    "eslint-plugin-react": "^7.31.11",
+    "jest": "^29.3.1",
+    "prettier": "2.8.0",
+    "typescript": "^4.9.3"
+  }
+}

package/src/hooks/use-iso-morphic-effect.ts

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

package/src/hooks/use-scroll.ts

@@ -0,0 +1,88 @@
+import { useCallback, useRef, useState } from 'react'
+import { scroller } from '../scroller'
+import { ScrollOptions } from '../types'
+import { defaultScrollOptions, getElement } from '../utils'
+import { useIsoMorphicEffect } from './use-iso-morphic-effect'
+
+export function useScroll<T extends HTMLElement>(props?: Partial<ScrollOptions>) {
+  const ref = useRef<T>(null)
+  const [state, setState] = useState(() => ({
+    left: 0,
+    top: 0,
+    isScrollable: false,
+    isScrolledLeft: false,
+    isScrolledRight: false,
+    isScrolledTop: false,
+    isScrolledBottom: false,
+  }))
+  const scrollOpt = { ...defaultScrollOptions, ...props }
+
+  const scrollCenter = useCallback(() => {
+    const container = getElement(ref)
+    const scrollContainer = scroller({ container, options: scrollOpt })
+    scrollContainer.scrollToCenter()
+  }, [])
+
+  const scrollTop = useCallback((offset?: number) => {
+    const container = getElement(ref)
+    const scrollContainer = scroller({ container, options: scrollOpt })
+    scrollContainer.scrollToTop(offset)
+  }, [])
+
+  const scrollBottom = useCallback((offset?: number) => {
+    const container = getElement(ref)
+    const scrollContainer = scroller({ container, options: scrollOpt })
+    scrollContainer.scrollToBottom(offset)
+  }, [])
+
+  const scrollRight = useCallback((offset?: number) => {
+    const container = getElement(ref)
+    const scrollContainer = scroller({ container, options: scrollOpt })
+    scrollContainer.scrollToRight(offset)
+  }, [])
+
+  const scrollLeft = useCallback((offset?: number) => {
+    const container = getElement(ref)
+    const scrollContainer = scroller({ container, options: scrollOpt })
+    scrollContainer.scrollToLeft(offset)
+  }, [])
+
+  useIsoMorphicEffect(() => {
+    const scrollContainer = ref.current
+    if (!scrollContainer) return
+
+    const { scrollWidth, clientWidth, clientHeight, scrollHeight } = scrollContainer
+    const isScrollable = clientWidth !== scrollWidth || clientHeight !== scrollHeight
+    setState((prev) => ({ ...prev, isScrollable }))
+
+    const handleScroll = () => {
+      if (scrollContainer) {
+        const { scrollLeft, scrollTop } = scrollContainer
+        const scrollState = {
+          ...state,
+          isScrolledLeft: scrollLeft === 0,
+          isScrolledRight: scrollLeft >= scrollWidth - clientWidth,
+          isScrolledTop: scrollTop === 0,
+          isScrolledBottom: scrollTop >= scrollHeight - clientHeight,
+          left: scrollLeft,
+          top: scrollTop,
+        }
+        setState(scrollState)
+      }
+    }
+
+    handleScroll()
+    scrollContainer?.addEventListener('scroll', handleScroll)
+    return () => scrollContainer?.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return {
+    ref,
+    state,
+    scrollLeft,
+    scrollRight,
+    scrollBottom,
+    scrollTop,
+    scrollCenter,
+  }
+}

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

@@ -0,0 +1,56 @@
+import { useCallback, useState } from 'react'
+import { scroller } from '../scroller'
+import { ScrollerProps, ScrollOptions } from '../types'
+import { useIsoMorphicEffect } from './use-iso-morphic-effect'
+import { defaultScrollOptions, resolveScrollValues } from '../utils'
+
+export function useWindowScroll(props?: Partial<Omit<ScrollOptions, 'direction'>>) {
+  const [state, setState] = useState(() => ({
+    left: 0,
+    top: 0,
+    isScrolledTop: false,
+    isScrolledBottom: false,
+  }))
+
+  const scrollArgs: ScrollerProps = {
+    container: window,
+    options: { ...defaultScrollOptions, ...props },
+  }
+
+  const scrollToTarget = useCallback((currentTarget: HTMLElement) => {
+    const scrollContainer = scroller(scrollArgs)
+    scrollContainer.scrollToTarget(currentTarget)
+  }, [])
+
+  const scrollTop = useCallback((offset?: number | undefined) => {
+    const scrollContainer = scroller(scrollArgs)
+    scrollContainer.scrollToTop(offset)
+  }, [])
+
+  const scrollBottom = useCallback((offset?: number | undefined) => {
+    const scrollContainer = scroller(scrollArgs)
+    scrollContainer.scrollToBottom(offset)
+  }, [])
+
+  useIsoMorphicEffect(() => {
+    const handleScroll = () => {
+      if (window) {
+        const { scrollLeft, scrollTop, scrollHeight, clientHeight } = resolveScrollValues(window)
+        const scrollState = {
+          ...state,
+          isScrolledTop: scrollTop === 0,
+          isScrolledBottom: scrollTop >= scrollHeight - clientHeight,
+          left: scrollLeft,
+          top: scrollTop,
+        }
+        setState(scrollState)
+      }
+    }
+
+    handleScroll()
+    window?.addEventListener('scroll', handleScroll)
+    return () => window?.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return { state, scrollTop, scrollBottom, scrollToTarget }
+}

package/src/index.ts

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