rooks/dist/cjs/hooks/useFocus.js

Essential React custom hooks ⚓ to super charge your components!

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useFocus = void 0;
var react_1 = require("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 = (0, react_1.useCallback)(function (e) {
        if (e.target === e.currentTarget) {
            if (propsOnBlur)
                propsOnBlur(e);
            if (propsOnFocusChange)
                propsOnFocusChange(false);
        }
    }, [propsOnBlur, propsOnFocusChange]);
    var onFocus = (0, react_1.useCallback)(function (e) {
        if (e.target === e.currentTarget) {
            if (propsOnFocus)
                propsOnFocus(e);
            if (propsOnFocusChange)
                propsOnFocusChange(true);
        }
    }, [propsOnFocusChange, propsOnFocus]);
    return {
        focusProps: {
            onFocus: onFocus,
            onBlur: onBlur,
        },
    };
};
exports.useFocus = useFocus;