reactuals/dist/hooks/useElementFocus.js

A useful package providing a collection of 50+ React hooks and utilities to simplify React development.

import { useRef, useEffect, useCallback } from "react";
export function useElementFocus() {
    const ref = useRef(null);
    const focusOnMount = useRef(false);
    const focus = useCallback(() => {
        ref.current?.focus();
    }, []);
    const blur = useCallback(() => {
        ref.current?.blur();
    }, []);
    const select = useCallback(() => {
        if ("select" in (ref.current || {})) {
            ref.current.select?.();
        }
    }, []);
    const scrollIntoView = useCallback((options) => {
        ref.current?.scrollIntoView(options);
    }, []);
    useEffect(() => {
        if (focusOnMount.current) {
            ref.current?.focus();
        }
    }, []);
    return {
        ref,
        focusOnMount,
        focus,
        blur,
        select,
        scrollIntoView,
    };
}