useScrollRestoration only supports vertical scroll

[magnusarinell]

I wanted to use the useScrollRestoration hook to keep scroll state for a horizontal tab component. The hook however only records vertical scroll and restores that. I hackishly solved my issue by copying and modifying the related code, saving the scrollLeft value and doing scrollTo using the x position. Something like:

import { useRef, useContext, useLayoutEffect, MutableRefObject } from "react"
import { useLocation } from "@gatsbyjs/reach-router"
import { ScrollContext } from "./ScrollHandlerCustom"

interface IScrollRestorationProps<T extends HTMLElement> {
  ref: MutableRefObject<T | null>
  onScroll(): void
}

export function useScrollRestorationCustom<T extends HTMLElement>(
  identifier: string
): IScrollRestorationProps<T> {
  const location = useLocation()
  const state = useContext(ScrollContext)
  const ref = useRef<T>(null)

  useLayoutEffect((): void => {
    if (ref.current) {
      const position = state.read(location, identifier)
      ref.current.scrollTo(position || 0, 0)
    }
  }, [location.key])

  return {
    ref,
    onScroll(): void {
      if (ref.current) {
        state.save(location, identifier, ref.current.scrollLeft)
      }
    },
  }
}

It would be nice with support for horizontal scroll restoration in the useScrollRestoration hook.

Cheers!