use-scroller 1.1.0 → 2.0.0

package/dist/esm/scroller.js

@@ -1,93 +0,0 @@
-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) {
-        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 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,
-        scrollTo: scrollTo,
-    };
-}

package/dist/esm/types.d.ts

@@ -1,17 +0,0 @@
-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

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

package/dist/esm/utils.d.ts

@@ -1,24 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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/src/hooks/use-iso-morphic-effect.ts

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

package/src/hooks/use-scroll.ts

@@ -1,95 +0,0 @@
-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 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 })
-    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,
-    scroll,
-  }
-}

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

@@ -1,60 +0,0 @@
-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 scroll = useCallback((from: number, to: number) => {
-    const scrollContainer = scroller(scrollArgs)
-    scrollContainer.scrollTo(from, to)
-  }, [])
-
-  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, scroll }
-}

package/src/index.ts

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

package/src/scroller.ts

@@ -1,110 +0,0 @@
-import { ScrollerProps } from './types'
-import { defaultScrollOptions, getEasing, resolveScrollValues, validateElement } from './utils'
-
-export function scroller({ container, options = defaultScrollOptions }: ScrollerProps) {
-  validateElement(container)
-
-  const { duration, easingOption, direction } = options
-  const { scrollLeft, scrollTop, clientWidth, clientHeight, scrollWidth, scrollHeight } =
-    resolveScrollValues(container)
-
-  /**
-   * 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: number, to: number, layout: 'horizontal' | 'vertical' = direction) {
-    let startTime: number | null = null
-    let requestId = 0
-
-    function loop(currentTime: number) {
-      if (!startTime) startTime = currentTime
-
-      const time = Math.min((currentTime - startTime) / duration, 1)
-      const easingFunc = getEasing(easingOption)
-      const 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() {
-    let from = 0
-    let to = 0
-
-    if (direction === 'vertical') {
-      const scrollYCenterPosition = (scrollHeight - clientHeight) / 2
-      from = scrollTop
-      to = scrollYCenterPosition
-    }
-
-    if (direction === 'horizontal') {
-      const scrollXCenterPosition = (scrollWidth - clientWidth) / 2
-      from = scrollLeft
-      to = scrollXCenterPosition
-    }
-    scrollTo(from, to, direction)
-  }
-
-  function scrollToTarget(target: HTMLElement) {
-    validateElement(target)
-    const { offsetTop, offsetLeft } = target
-    let from = 0
-    let to = 0
-
-    if (direction === 'vertical') {
-      from = scrollTop
-      to = offsetTop
-    }
-
-    if (direction === 'horizontal') {
-      from = scrollLeft
-      to = offsetLeft
-    }
-
-    scrollTo(from, to, direction)
-  }
-
-  const scrollToLeft = (offset?: number) => {
-    const scrollPosition = offset || scrollLeft - clientWidth
-    scrollTo(scrollLeft, scrollPosition, 'horizontal')
-  }
-
-  const scrollToRight = (offset?: number) => {
-    const scrollPosition = offset || scrollLeft + clientWidth
-    scrollTo(scrollLeft, scrollPosition, 'horizontal')
-  }
-
-  const scrollToTop = (offset?: number) => {
-    const scrollPosition = offset || scrollTop - clientHeight
-    scrollTo(scrollTop, scrollPosition, 'vertical')
-  }
-
-  const scrollToBottom = (offset?: number) => {
-    const scrollPosition = offset || scrollTop + clientHeight
-    scrollTo(scrollTop, scrollPosition, 'vertical')
-  }
-
-  return {
-    scrollToLeft,
-    scrollToRight,
-    scrollToTop,
-    scrollToBottom,
-    scrollToTarget,
-    scrollToCenter,
-    scrollTo,
-  }
-}

package/src/types.ts

@@ -1,21 +0,0 @@
-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/src/utils.ts

@@ -1,90 +0,0 @@
-import { RefObject } from 'react'
-import { EasingFunction, EasingFunctions, EasingOptions, ScrollOptions } from './types'
-
-export const isServer = typeof window === 'undefined' || typeof document === 'undefined'
-
-export const defaultScrollOptions: ScrollOptions = {
-  direction: 'vertical',
-  duration: 300,
-  easingOption: 'ease-in-out',
-}
-
-/**
- * Resolves scroll values based on the type of param.
- * @param {HTMLElement | Window} element
- */
-export const resolveScrollValues = (element: HTMLElement | Window) => {
-  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?: HTMLElement | Window) {
-  if (element === undefined) {
-    throw new Error(`The element passed to scroller() was undefined`)
-  }
-  if (!(element instanceof HTMLElement || Window)) {
-    throw new TypeError(
-      `
-      The element passed to scroller() must be a valid element. 
-      You passed ${element}.
-      `
-    )
-  }
-}
-
-export const getElement = (ref: RefObject<HTMLElement>) => {
-  if (!ref.current) {
-    throw new Error(`Could not resolve ref object: ${ref.current}`)
-  }
-  return ref.current
-}
-
-export const easingMap: EasingFunctions = {
-  linear(t: number) {
-    return t
-  },
-  'ease-in'(t: number) {
-    return t * t
-  },
-  'ease-out'(t: number) {
-    return t * (2 - t)
-  },
-  'ease-in-out'(t: number) {
-    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
-  },
-}
-
-export const getEasing = (easing?: EasingOptions): EasingFunction => {
-  const easeFunc = easingMap[easing || defaultScrollOptions.easingOption]
-  if (!easeFunc) {
-    const options = Object.keys(easingMap).join(',')
-    throw new Error(
-      `Scroll error: scroller does not support an easing option of "${easing}". Supported options are ${options}`
-    )
-  }
-  return easeFunc
-}