An accessible React Hook that scrolls to an element

useScroll.ts

import { useCallback, useRef, RefObject } from 'react';

/**
 * Scroll to an element.
 */
export default function useScroll<T extends HTMLElement>(
	options: Omit<ScrollIntoViewOptions, 'behavior'> = {},
): [RefObject<T>, () => void] {
	const ref = useRef<T>(null);
	const callback = useCallback(() => {
		if (ref.current) {
			// Don't use smooth scrolling when the user prefers reduced motion
			const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
			ref.current.scrollIntoView({
				...options,
				behavior: prefersReducedMotion ? undefined : 'smooth',
			});
		}
	}, []);
	return [ref, callback];
}