use-scroller 1.0.0

package/src/scroller.ts

@@ -0,0 +1,109 @@
+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') {
+    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,
+  }
+}

package/src/types.ts

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

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