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
}

A bit better:

import {
  MutableRefObject,
  useRef,
} from 'react';

const useFocus = (): [any, () => void] => {
  const htmlElRef: MutableRefObject<any> = useRef(null);
  const setFocus = (): void => {
    htmlElRef?.current?.focus?.();
  };

  return [htmlElRef, setFocus];
};

export default useFocus;

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>();