@modern-kit/react/dist/hooks/useFocus/index.mjs

modern-kit/react

import { useState, useRef, useCallback } from 'react';
import { useEventListener } from '../useEventListener/index.mjs';
import '../usePreservedCallback/index.mjs';
import '../useIsomorphicLayoutEffect/index.mjs';
import '@modern-kit/utils';

function useFocus({
  onFocus,
  onBlur
} = {}) {
  const [isFocus, setIsFocus] = useState(false);
  const ref = useRef(null);
  const focusAction = (event) => {
    setIsFocus(true);
    onFocus?.(event);
  };
  const blurAction = (event) => {
    setIsFocus(false);
    onBlur?.(event);
  };
  const setFocus = useCallback(() => {
    if (!ref.current) return;
    ref.current.focus();
    setIsFocus(true);
  }, []);
  useEventListener(ref, "focus", focusAction);
  useEventListener(ref, "blur", blurAction);
  return { ref, isFocus, setFocus };
}

export { useFocus };
//# sourceMappingURL=index.mjs.map