@mirawision/reactive-hooks
Version:
A comprehensive collection of 50+ React hooks for state management, UI interactions, device APIs, async operations, drag & drop, audio/speech, and more. Full TypeScript support with SSR safety.
17 lines (16 loc) • 697 B
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useFocus = useFocus;
const react_1 = require("react");
const use_event_listener_1 = require("./use-event-listener");
/**
* A hook that tracks whether an HTML element has focus.
* @param ref React ref object for the element to monitor
* @returns boolean indicating if the element is currently focused
*/
function useFocus(ref) {
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
(0, use_event_listener_1.useEventListener)(ref, 'focus', () => setIsFocused(true), true);
(0, use_event_listener_1.useEventListener)(ref, 'blur', () => setIsFocused(false), true);
return isFocused;
}