import { useFocus } from "~/hooks/useFocus";
 
function Component() {
  const [ref, isFocused] = useFocus<HTMLInputElement>((focusState) => {
    console.log("Focus state:", focusState);
  });
 
  return (
    <div>
      <input ref={ref} type="text" placeholder="Focus me!" />
      <p>The input is currently {isFocused ? "focused" : "unfocused"}</p>
    </div>
  );
}

function useFocus<T extends HTMLElement>(
  callback?: UseFocusCallback,
): [RefObject<T>, boolean];