Better scrollIntoView functionality for React
npm install use-scroll-into-view> Better scrollIntoView functionality for React
``bash`
npm install --save use-scroll-into-view
use-scroll-into-view handles scroll behavior for any scrollable element. Basic usage works the same way as element.scrollIntoView().reduced-motion
Hook adjusts scrolling animation with respect to the user preference.
Hook is configured with settings object:
- onScrollFinish – function that will be called after scroll animationeasing
- – custom math EasingFunction functionduration
- - duration of scroll animation in millisecondsaxis
- - axis of scrollcancelable
- - indicator if animation may be interrupted by user scrollingoffset
- - additional distance between nearest edge and elementisList
- - indicator that prevents content jumping in scrolling lists with multiple targets eg. Select, Carousel
Hook returns an object with:
- scrollIntoView – function that starts scroll animationcancel
- – function that stops scroll animationtargetRef
- - ref of target HTML nodescrollableRef
- - ref of scrollable parent HTML element, if not used document element will be used
Returned scrollIntoView function accepts single optional argument alignment - optional target element alignment relatively to parent based on current axis.
`tsx`
scrollIntoView({ alignment: 'center' })
You can choose easing behavior by selecting value from Easing enum exported together with hook.
If you are not satisfied with that the hook accept custom easing math function to control the flow of animation.t
It takes argument which is a number between 0 and 1.
Default EasingFunction is easeInOutQuad - more info here.
You can find other popular examples on easings.net
`tsx`
useScrollIntoView({
target: someDomElement,
easing: (t) => (t < 0.5 ? 16 Math.pow(t, 5) : 1 - Math.pow(-2 x + 2, 5) / 2) // easeInOutQuint
})
`tsx``
function useScrollIntoView<
Target extends HTMLElement,
Parent extends HTMLElement | null = null
>({
onScrollFinish?: () => void;
duration?: number;
axis?: 'x' | 'y';
easing?: (t: number) => number | Easing;
offset?: number;
cancelable?: boolean;
isList?: boolean;
}): {
targetRef: MutableRefObject
scrollableRef: MutableRefObject
scrollIntoView: ({
alignment?: 'start' | 'end' | 'center';
}) => void;
cancel: () => void;
};
MIT © EmilMalanczak
---