rooks/dist/esm/hooks/useFocus.js

Essential React custom hooks ⚓ to super charge your components!

import { useCallback } from "react";
/**
 * useFocus
 * @description Handles focus events for the immediate target element.
 * @see {@link https://react-hooks.org/docs/useFocus}
 */
var useFocus = function (props) {
    var propsOnBlur = props.onBlur, propsOnFocus = props.onFocus, propsOnFocusChange = props.onFocusChange;
    var onBlur = useCallback(function (e) {
        if (e.target === e.currentTarget) {
            if (propsOnBlur)
                propsOnBlur(e);
            if (propsOnFocusChange)
                propsOnFocusChange(false);
        }
    }, [propsOnBlur, propsOnFocusChange]);
    var onFocus = useCallback(function (e) {
        if (e.target === e.currentTarget) {
            if (propsOnFocus)
                propsOnFocus(e);
            if (propsOnFocusChange)
                propsOnFocusChange(true);
        }
    }, [propsOnFocusChange, propsOnFocus]);
    return {
        focusProps: {
            onFocus: onFocus,
            onBlur: onBlur,
        },
    };
};
export { useFocus };