Function useFocus

Custom React hook for detecting focus state of a referenced element.

This hook listens for focus and blur 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 = useFocus(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')}
    />
  );
};