Function useFocusIn

Custom React hook for detecting focus-in and focus-out events on a referenced element.

This hook listens for focusin and focusout events on the specified element and updates the isFocused state accordingly. It returns a boolean value indicating whether the element is currently focused.

Example

const MyComponent = () => {
  const ref = useRef<HTMLInputElement>(null);
  const isFocused = useFocusIn(ref);

  return (
    <input
      ref={ref}
      type="text"
      placeholder={isFocused ? 'Input is focused' : 'Input is not focused'}
      onFocus={() => console.log('Input focused')}
      onBlur={() => console.log('Input blurred')}
    />
  );
};