use-scroller 1.2.0 → 2.0.0

package/dist/esm/scroller.js

@@ -1,90 +0,0 @@
-import { defaultScrollOptions, getEasing, resolveScrollValues, validateElement } from './utils';
-export function createScroller(container, options) {
-    if (options === void 0) { options = defaultScrollOptions; }
-    validateElement(container);
-    var duration = options.duration, easingOption = options.easingOption, direction = options.direction;
-    var _a = 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;
-        var distance = Math.abs(to - from);
-        function calculateCurrentPosition(timeFraction) {
-            var easingFunc = getEasing(easingOption);
-            return easingFunc(timeFraction) * distance + from;
-        }
-        function updateScrollPosition(currentPosition) {
-            container.scrollTo({
-                left: layout === 'horizontal' ? currentPosition : undefined,
-                top: layout === 'vertical' ? currentPosition : undefined,
-            });
-        }
-        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(animateScroll);
-    }
-    function scrollTo(to) {
-        var from = direction === 'vertical' ? scrollTop : scrollLeft;
-        scroll(from, to);
-    }
-    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;
-        }
-        scroll(from, to, direction);
-    }
-    function scrollToTarget(target, offset) {
-        if (offset === void 0) { offset = 0; }
-        validateElement(target);
-        var offsetTop = target.offsetTop, offsetLeft = target.offsetLeft;
-        var from = 0;
-        var to = 0;
-        if (direction === 'vertical') {
-            from = scrollTop;
-            to = offsetTop - offset;
-        }
-        if (direction === 'horizontal') {
-            from = scrollLeft;
-            to = offsetLeft - offset;
-        }
-        scroll(from, to, direction);
-    }
-    return {
-        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');
-        },
-    };
-}

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,37 +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 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;
-    scrollTop: number;
-    scrollWidth: number;
-    clientWidth: number;
-    clientHeight: number;
-    scrollHeight: number;
-    scrollLeftMax: number;
-    scrollTopMax: number;
-};
-/**
- * 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;

package/dist/esm/utils.js

@@ -1,85 +0,0 @@
-// Check if the code is running on the server-side.
-export var isServer = typeof window === 'undefined' || typeof document === 'undefined';
-// Default scroll options used if no options are provided.
-export var defaultScrollOptions = {
-    direction: 'vertical',
-    duration: 300,
-    easingOption: 'ease-in-out',
-};
-/**
- * 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 var resolveScrollValues = function (element) {
-    var isWindow = element instanceof Window;
-    var docElement = document.documentElement;
-    var docBody = document.body;
-    var scrollLeftMax = isWindow
-        ? Math.max(docBody.scrollLeft, docElement.scrollLeft)
-        : element.scrollWidth - element.clientWidth;
-    var scrollTopMax = isWindow
-        ? Math.max(docBody.scrollTop, docElement.scrollTop)
-        : element.scrollHeight - element.clientHeight;
-    return {
-        scrollLeft: isWindow ? docBody.scrollLeft || docElement.scrollLeft : element.scrollLeft,
-        scrollTop: isWindow ? docBody.scrollTop || docElement.scrollTop : element.scrollTop,
-        scrollWidth: isWindow ? docBody.scrollWidth || docElement.scrollWidth : element.scrollWidth,
-        clientWidth: isWindow ? docBody.clientWidth || docElement.clientWidth : element.clientWidth,
-        clientHeight: isWindow ? docBody.clientHeight || docElement.clientHeight : element.clientHeight,
-        scrollHeight: isWindow ? docBody.scrollHeight || docElement.scrollHeight : element.scrollHeight,
-        scrollLeftMax: scrollLeftMax,
-        scrollTopMax: scrollTopMax,
-    };
-};
-/**
- * Validate if the element passed to the function is valid.
- * @param {HTMLElement | Window} element - The element to validate.
- */
-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      "));
-    }
-}
-/**
- * Get the DOM element from a React ref object.
- * @param {RefObject<HTMLElement>} ref - The React ref object.
- * @returns {HTMLElement} - The DOM element.
- */
-export var getElement = function (ref) {
-    if (!ref.current) {
-        throw new Error("Could not resolve ref object: ".concat(ref.current));
-    }
-    return ref.current;
-};
-// Map of easing functions for scroll animations.
-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;
-    },
-};
-/**
- * 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 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,84 +0,0 @@
-import { useRef, useState } from 'react'
-import { createScroller } from '../scroller'
-import { ScrollOptions } from '../types'
-import { defaultScrollOptions, getElement } from '../utils'
-import { useIsoMorphicEffect } from './use-iso-morphic-effect'
-
-const initialState = {
-  left: 0, // Current scroll position on the X-axis
-  top: 0, // Current scroll position on the Y-axis
-  isScrollable: false, // Determines if the container has content that can be scrolled
-  isScrolledLeft: true, // Determines if the container is at its leftmost position
-  isScrolledRight: false, // Determines if the container is at its rightmost position
-  isScrolledTop: true, // Determines if the container is at its topmost position
-  isScrolledBottom: false, // Determines if the container is at its bottommost position
-  maxScrollLeft: 0, // Maximum possible scroll on the X-axis
-  maxScrollTop: 0, // Maximum possible scroll on the Y-axis
-  scrollPercentageX: 0, // Percentage of horizontal scroll covered
-  scrollPercentageY: 0, // Percentage of vertical scroll covered
-}
-
-export function useScroll<T extends HTMLElement>(props?: Partial<ScrollOptions>) {
-  const ref = useRef<T>(null)
-  const scrollOpt = { ...defaultScrollOptions, ...props }
-  const scrollerRef = useRef<ReturnType<typeof createScroller> | null>(null)
-  const [state, setState] = useState(() => initialState)
-
-  useIsoMorphicEffect(() => {
-    const scrollContainer = ref.current
-    if (!scrollContainer) return
-
-    // Create the scroller instance only once inside the effect
-    if (!scrollerRef.current) {
-      const container = getElement(ref)
-      scrollerRef.current = createScroller(container, scrollOpt)
-    }
-
-    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 isAtLeftBoundary = scrollLeft === 0
-        const isAtRightBoundary = scrollLeft >= scrollWidth - clientWidth
-        const isAtTopBoundary = scrollTop === 0
-        const isAtBottomBoundary = scrollTop >= scrollHeight - clientHeight
-        const scrollState = {
-          ...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?.addEventListener('scroll', handleScroll)
-    return () => scrollContainer?.removeEventListener('scroll', handleScroll)
-  }, [state])
-
-  return {
-    ref,
-    state,
-    scrollLeft: scrollerRef.current?.scrollToLeft,
-    scrollRight: scrollerRef.current?.scrollToRight,
-    scrollBottom: scrollerRef.current?.scrollToBottom,
-    scrollTop: scrollerRef.current?.scrollToTop,
-    scrollCenter: scrollerRef.current?.scrollToCenter,
-    scrollTo: scrollerRef.current?.scrollTo,
-  }
-}

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

@@ -1,73 +0,0 @@
-import { useCallback, useState } from 'react'
-import { createScroller } from '../scroller'
-import { 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 container = window
-  const scrollOptions = { ...defaultScrollOptions, ...props }
-
-  const scrollContainer = createScroller(container, scrollOptions)
-
-  const handleScroll = useCallback(() => {
-    const { scrollLeft, scrollTop, clientHeight, scrollHeight } = resolveScrollValues(container)
-
-    const isAtTopBoundary = scrollTop === 0
-    const isAtBottomBoundary = scrollTop >= scrollHeight - clientHeight
-
-    const scrollState = {
-      left: scrollLeft,
-      top: scrollTop,
-      isScrolledTop: isAtTopBoundary,
-      isScrolledBottom: isAtBottomBoundary,
-    }
-
-    setState(scrollState)
-  }, [container])
-
-  useIsoMorphicEffect(() => {
-    handleScroll()
-    container.addEventListener('scroll', handleScroll)
-    return () => {
-      container.removeEventListener('scroll', handleScroll)
-    }
-  }, [handleScroll])
-
-  const scrollTo = useCallback(
-    (position: number) => {
-      scrollContainer.scrollTo(position)
-    },
-    [scrollContainer]
-  )
-
-  const scrollToTarget = useCallback(
-    (currentTarget: HTMLElement) => {
-      scrollContainer.scrollToTarget(currentTarget)
-    },
-    [scrollContainer]
-  )
-
-  const scrollTop = useCallback(
-    (offset?: number | undefined) => {
-      scrollContainer.scrollToTop(offset)
-    },
-    [scrollContainer]
-  )
-
-  const scrollBottom = useCallback(
-    (offset?: number | undefined) => {
-      scrollContainer.scrollToBottom(offset)
-    },
-    [scrollContainer]
-  )
-
-  return { state, scrollTop, scrollBottom, scrollToTarget, scrollTo }
-}

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,107 +0,0 @@
-import { ScrollOptions } from './types'
-import { defaultScrollOptions, getEasing, resolveScrollValues, validateElement } from './utils'
-
-export function createScroller(
-  container: HTMLElement | Window,
-  options: ScrollOptions = defaultScrollOptions
-) {
-  validateElement(container)
-  const { duration, easingOption, direction } = options
-  const { scrollLeft, scrollTop, clientWidth, clientHeight, scrollWidth, scrollHeight } =
-    resolveScrollValues(container)
-
-  function scroll(from: number, to: number, layout: ScrollOptions['direction'] = direction) {
-    let startTime: number | null = null
-    let requestId = 0
-    const distance = Math.abs(to - from)
-
-    function calculateCurrentPosition(timeFraction: number): number {
-      const easingFunc = getEasing(easingOption)
-      return easingFunc(timeFraction) * distance + from
-    }
-
-    function updateScrollPosition(currentPosition: number) {
-      container.scrollTo({
-        left: layout === 'horizontal' ? currentPosition : undefined,
-        top: layout === 'vertical' ? currentPosition : undefined,
-      })
-    }
-
-    function animateScroll(currentTime: number) {
-      if (!startTime) startTime = currentTime
-      const elapsedTime = currentTime - startTime
-      const timeFraction = elapsedTime / duration
-      const currentPosition = calculateCurrentPosition(timeFraction)
-
-      updateScrollPosition(currentPosition)
-
-      if (timeFraction < 1) {
-        requestId = requestAnimationFrame(animateScroll)
-      } else {
-        cancelAnimationFrame(requestId)
-      }
-    }
-
-    requestId = requestAnimationFrame(animateScroll)
-  }
-
-  function scrollTo(to: number) {
-    const from = direction === 'vertical' ? scrollTop : scrollLeft
-    scroll(from, to)
-  }
-
-  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
-    }
-    scroll(from, to, direction)
-  }
-
-  function scrollToTarget(target: HTMLElement, offset = 0) {
-    validateElement(target)
-    const { offsetTop, offsetLeft } = target
-    let from = 0
-    let to = 0
-
-    if (direction === 'vertical') {
-      from = scrollTop
-      to = offsetTop - offset
-    }
-
-    if (direction === 'horizontal') {
-      from = scrollLeft
-      to = offsetLeft - offset
-    }
-
-    scroll(from, to, direction)
-  }
-
-  return {
-    scrollTo,
-    scrollToCenter,
-    scrollToTarget,
-    scrollToLeft: (offset?: number) => {
-      scroll(scrollLeft, offset || scrollLeft - clientWidth, 'horizontal')
-    },
-    scrollToRight: (offset?: number) => {
-      scroll(scrollLeft, offset || scrollLeft + clientWidth, 'horizontal')
-    },
-    scrollToTop: (offset?: number) => {
-      scroll(scrollTop, offset || scrollTop - clientHeight, 'vertical')
-    },
-    scrollToBottom: (offset?: number) => {
-      scroll(scrollTop, offset || scrollTop + clientHeight, 'vertical')
-    },
-  }
-}

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,103 +0,0 @@
-import { RefObject } from 'react'
-import { EasingFunction, EasingFunctions, EasingOptions, ScrollOptions } from './types'
-
-// Check if the code is running on the server-side.
-export const isServer = typeof window === 'undefined' || typeof document === 'undefined'
-
-// Default scroll options used if no options are provided.
-export const defaultScrollOptions: ScrollOptions = {
-  direction: 'vertical',
-  duration: 300,
-  easingOption: 'ease-in-out',
-}
-
-/**
- * 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 const resolveScrollValues = (element: HTMLElement | Window) => {
-  const isWindow = element instanceof Window
-  const docElement = document.documentElement
-  const docBody = document.body
-
-  const scrollLeftMax = isWindow
-    ? Math.max(docBody.scrollLeft, docElement.scrollLeft)
-    : element.scrollWidth - element.clientWidth
-  const scrollTopMax = isWindow
-    ? Math.max(docBody.scrollTop, docElement.scrollTop)
-    : element.scrollHeight - element.clientHeight
-
-  return {
-    scrollLeft: isWindow ? docBody.scrollLeft || docElement.scrollLeft : element.scrollLeft,
-    scrollTop: isWindow ? docBody.scrollTop || docElement.scrollTop : element.scrollTop,
-    scrollWidth: isWindow ? docBody.scrollWidth || docElement.scrollWidth : element.scrollWidth,
-    clientWidth: isWindow ? docBody.clientWidth || docElement.clientWidth : element.clientWidth,
-    clientHeight: isWindow ? docBody.clientHeight || docElement.clientHeight : element.clientHeight,
-    scrollHeight: isWindow ? docBody.scrollHeight || docElement.scrollHeight : element.scrollHeight,
-    scrollLeftMax,
-    scrollTopMax,
-  }
-}
-
-/**
- * Validate if the element passed to the function is valid.
- * @param {HTMLElement | Window} element - The element to validate.
- */
-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}.
-      `
-    )
-  }
-}
-
-/**
- * Get the DOM element from a React ref object.
- * @param {RefObject<HTMLElement>} ref - The React ref object.
- * @returns {HTMLElement} - The DOM element.
- */
-export const getElement = (ref: RefObject<HTMLElement>) => {
-  if (!ref.current) {
-    throw new Error(`Could not resolve ref object: ${ref.current}`)
-  }
-  return ref.current
-}
-
-// Map of easing functions for scroll animations.
-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
-  },
-}
-
-/**
- * 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 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
-}