UNPKG

smooth-auto-scroll

Version:

Smooth auto-scroll React hook and component for ultra-smooth motion at any speed.

70 lines (66 loc) 2.44 kB
import React$1 from 'react'; type SmoothAutoScrollOptions = { enabled?: boolean; containerRef: React.RefObject<HTMLElement>; innerRef: React.RefObject<HTMLElement>; pxPerSecond: number; bottomTolerance?: number; topTolerance?: number; capDtMs?: number; pauseEvents?: Array<keyof GlobalEventHandlersEventMap>; resumeEvents?: Array<keyof GlobalEventHandlersEventMap>; smoothingFactor?: number; accelerationTime?: number; direction?: "down" | "up"; resumeDelay?: number; pauseOnHover?: boolean; pauseOnFocus?: boolean; startOffset?: number; endOffset?: number; respectReducedMotion?: boolean; onStart?: () => void; onPause?: () => void; onResume?: () => void; onReachEnd?: () => void; onReachTop?: () => void; }; declare function useSmoothAutoScroll({ enabled, containerRef, innerRef, pxPerSecond, bottomTolerance, topTolerance, capDtMs, // ~60fps for smoother updates pauseEvents, resumeEvents, smoothingFactor, // For smooth velocity changes accelerationTime, // 1 second to reach full speed direction, resumeDelay, pauseOnHover, pauseOnFocus, startOffset, endOffset, respectReducedMotion, onStart, onPause, onResume, onReachEnd, onReachTop, }: SmoothAutoScrollOptions): { pause: () => void; resume: () => void; reset: () => void; readonly paused: boolean; readonly currentDirection: "down" | "up"; readonly hasStarted: boolean; }; type AutoScrollContainerProps = { containerRef?: React$1.RefObject<HTMLElement>; enabled?: boolean; pxPerSecond: number; bottomTolerance?: number; topTolerance?: number; capDtMs?: number; smoothingFactor?: number; accelerationTime?: number; pauseEvents?: Array<keyof GlobalEventHandlersEventMap>; resumeEvents?: Array<keyof GlobalEventHandlersEventMap>; direction?: "down" | "up"; resumeDelay?: number; pauseOnHover?: boolean; pauseOnFocus?: boolean; startOffset?: number; endOffset?: number; respectReducedMotion?: boolean; onStart?: () => void; onPause?: () => void; onResume?: () => void; onReachEnd?: () => void; onReachTop?: () => void; className?: string; style?: React$1.CSSProperties; children: React$1.ReactNode; } & React$1.HTMLAttributes<HTMLDivElement>; declare const AutoScrollContainer: React$1.FC<AutoScrollContainerProps>; export { AutoScrollContainer, useSmoothAutoScroll };