Manage the scroll and the responsive with hooks

[alexis-piquet]

Hi guys, I just want to share with you hooks I've made recently to use window and document to manage the scroll and the responsive.

The Window hook: (useWindow)

import { useEffect, useState } from 'react'

type AppWindow = Window & typeof globalThis

interface WindowProperties {
  inner_height: number
  inner_width: number
  outer_height: number
  outer_width: number
  x: number
  y: number
}

interface WindowProps extends WindowProperties {
  app_window: AppWindow
  scrollTo: (top: number, left?: number) => void
}

export interface WindowOptions {
  behavior?: ScrollBehavior
  default_left?: number
  default_top?: number
}

export function useWindow (
  { behavior = 'smooth', default_left, default_top }: WindowOptions,
): WindowProps {
  const default_properties: WindowProperties = {
    inner_height: 0,
    inner_width: 0,
    outer_height: 0,
    outer_width: 0,
    x: 0,
    y: 0,
  }
  const [ app_window, setAppWindow ] = useState<AppWindow>()
  const [ properties, setProperties ] = useState<WindowProperties>(default_properties)

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setAppWindow(window)
      app_window?.addEventListener('scroll', () => onScroll(app_window))
      app_window?.addEventListener('resize', () => onResize(app_window))
      if (default_left) app_window?.scrollTo({ left: default_left, behavior })
      if (default_top) app_window?.scrollTo({ top: default_top, behavior })
    }
  }, [ behavior, default_left, default_top ])

  return {
    app_window,
    scrollTo,
    ...properties,
  }

  function scrollTo (top?: number, left?: number): void {
    app_window.scrollTo({ left, top, behavior })
  }

  function onScroll (app_window: AppWindow): void {
    const { scrollX, scrollY } = app_window
    setProperties({
      ...properties,
      x: scrollX,
      y: scrollY,
    })
  }

  function onResize (app_window: AppWindow): void {
    const { innerHeight, innerWidth, outerHeight, outerWidth } = app_window
    setProperties({
      ...properties,
      inner_height: innerHeight,
      inner_width: innerWidth,
      outer_height: outerHeight,
      outer_width: outerWidth,
    })
  }
}

The Element hook: (useElement)

import { useEffect, useState } from 'react'

type AppDocument = Document

interface ElementProperties {
  height: number
  width: number
  x: number
  y: number
}

interface ElementProps extends ElementProperties {
  app_document: AppDocument
  element: HTMLElement
  scrollTo: (top: number, left?: number) => void
}

export interface ElementOptions {
  behavior?: ScrollBehavior
  default_left?: number
  default_top?: number
  element_id: string
}

export function useElement (
  { behavior = 'smooth', default_left, default_top, element_id }: ElementOptions,
): ElementProps {
  const default_properties: ElementProperties = {
    height: 0,
    width: 0,
    x: 0,
    y: 0,
  }
  const [ app_document, setAppDocument ] = useState<AppDocument>()
  const [ element, setElement ] = useState<HTMLElement>()
  const [ properties, setProperties ] = useState<ElementProperties>(default_properties)
  useEffect(() => {
    if (typeof document !== 'undefined') {
      setAppDocument(document)
      const target = app_document?.getElementById(element_id)
      setElement(target)
      target?.addEventListener('scroll', () => onScroll(target))
      if (default_left) target?.scrollTo({ left: default_left, behavior })
      if (default_top) target?.scrollTo({ top: default_top, behavior })
    }
  }, [ behavior, default_left, default_top, element_id ])

  return {
    app_document,
    element,
    scrollTo,
    ...properties,
  }

  function scrollTo (top?: number, left?: number): void {
    element?.scrollTo({ left, top, behavior })
  }

  function onScroll (element: HTMLElement): void {
    const { offsetHeight, offsetWidth, scrollLeft, scrollTop } = element
    setProperties({
      height: offsetHeight,
      width: offsetWidth,
      x: scrollLeft,
      y: scrollTop,
    })
  }
}

And finaly, the use case example:

import { FaChevronUp } from 'react-icons/fa'

import { Button, BUTTON_TYPE_BIG, ButtonProps } from '#components/ui/Button'
import { ScrollButtonStyled } from '#components/ui/ScrollButton/styles'
import { useElement, ElementOptions } from '#shared/hooks/element'
import { classnames } from '#shared/styles'

export const POSITION_TOP_CENTER = 'top-center'
export const POSITION_TOP_LEFT = 'top-left'
export const POSITION_TOP_RIGHT = 'top-right'
export const POSITION_BOTTOM_CENTER = 'bottom-center'
export const POSITION_BOTTOM_LEFT = 'bottom-left'
export const POSITION_BOTTOM_RIGHT = 'bottom-right'

export const POSITIONS = [
  POSITION_TOP_CENTER,
  POSITION_TOP_LEFT,
  POSITION_TOP_RIGHT,
  POSITION_BOTTOM_CENTER,
  POSITION_BOTTOM_LEFT,
  POSITION_BOTTOM_RIGHT,
] as const

export type ScrollButtonPosition = typeof POSITIONS[number]

interface ScrollProps extends ButtonProps {
  left?: number
  options: ElementOptions
  position?: ScrollButtonPosition
  top: number
}

export const ScrollButton: React.FC<ScrollProps> = (
  { left, options, position = POSITION_BOTTOM_RIGHT, top, ...props }: ScrollProps,
) => {
  const { height, scrollTo, y } = useElement(options)
  return (
    <ScrollButtonStyled
      className={classnames({ active: y > (height / 10) })}
      theme={{ position }}>
      <Button
        {...props}
        icon={<FaChevronUp />}
        type={BUTTON_TYPE_BIG}
        onClick={() => scrollTo(top, left)}/>
    </ScrollButtonStyled>
  )
}

import React from 'react'

import { DefaultLayout } from '#components/layout'
import { Content } from '#components/layout/full/styles'
import { ScrollButton } from '#components/ui/ScrollButton'

export const FullLayout: React.FC = (
  { children },
) => {
  const element_id = 'full-layout'
  return (
    <DefaultLayout>
      <Content id={element_id}>
        {children}
        <ScrollButton
          options={{ element_id }}
          top={0}/>
      </Content>
    </DefaultLayout>
  )
}

I hope and I think they will be useful for your applications ;)

Don't hesitate to give me feedbacks 🚀