useFocus.ts

useFocus.ts

export const useFocus = () => {
	const htmlElRef = useRef<HTMLElement>()
	const setFocus = () => {
		const currentEl = htmlElRef.current
		currentEl && currentEl.focus()
	}
	return [setFocus, htmlElRef] as const
}

Even better:

export default function useFocus<T extends HTMLElement = HTMLElement>() {
  const ref = React.useRef<T>(null);
  const setFocus = () => ref?.current?.focus?.();

  return [ref, setFocus] as const;
}

and use like:

const [focusRef, setFocus] = useFocus<HTMLButtonElement>();