Module lib/hooks/useAutoScroll

useAutoScroll

• useAutoScroll<E, T>(opts?: { skip?: boolean; pauseOnUserScroll?: boolean; initialBehavior?: ScrollBehavior; behavior?: ScrollBehavior; track?: boolean; offset?: { top: number; bottom: number }; log?: boolean }): { forceNextScroll: any; scrollContainer: HTMLElement | null; scrollContainerRef: RefCallback<E>; targetRef: RefCallback<T>; scroll: any; isAutoScrolling: RefObject<Promise<void> | null> }

• Implementation of autoscroll that watches a target and autoscrolls anything the target changes. Target can be a targetRef that you want to keep in view or it can be simply the length of an array that changes and causes a scroll to the bottom.

  Type Parameters

  • E extends HTMLElement = HTMLDivElement

  • T extends HTMLElement = HTMLDivElement

  Parameters

  • Optional opts: { skip?: boolean; pauseOnUserScroll?: boolean; initialBehavior?: ScrollBehavior; behavior?: ScrollBehavior; track?: boolean; offset?: { top: number; bottom: number }; log?: boolean }

    • Optional skip?: boolean

      set to true to skip auto scrolling altogether

    • Optional pauseOnUserScroll?: boolean

      set to true to stop autoscrolling when the user manually scrolls

    • Optional initialBehavior?: ScrollBehavior

      see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

    • Optional behavior?: ScrollBehavior

      see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

    • Optional track?: boolean

    • Optional offset?: { top: number; bottom: number }

      • top: number

      • bottom: number

    • Optional log?: boolean

  Returns { forceNextScroll: any; scrollContainer: HTMLElement | null; scrollContainerRef: RefCallback<E>; targetRef: RefCallback<T>; scroll: any; isAutoScrolling: RefObject<Promise<void> | null> }

  A React ref object that should be set on the scroll container, and another ref that should be the target to scroll into view.

  • forceNextScroll:function

    • forceNextScroll(): void

    • Returns void

  • scrollContainer: HTMLElement | null

  • scrollContainerRef: RefCallback<E>

  • targetRef: RefCallback<T>

  • scroll:function

    • scroll(opts?: { top?: number; onlyIfNeeded?: boolean }): void

    • Parameters

      • Optional opts: { top?: number; onlyIfNeeded?: boolean }

        • Optional top?: number

        • Optional onlyIfNeeded?: boolean

      Returns void

  • isAutoScrolling: RefObject<Promise<void> | null>