React hook for smooth scrolling of an element into view

use-scroll-into-view.ts

import { useMemo, useLayoutEffect } from 'react';

export const useScrollIntoView = (
    selector: string,
    options: ScrollIntoViewOptions,
): void => {
    const opts: ScrollIntoViewOptions = useMemo(
        () => ({
            block: 'center',
            inline: 'center',
            behavior: 'smooth',
            ...options,
        }),
        [options],
    );

    useLayoutEffect(() => {
        const element = document.querySelector(selector);

        if (element) {
            element.scrollIntoView(opts);
        }
    });
};