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

modern-kit/react

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

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

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