Custom React Hooks

custom-react-hooks.ts

import { RefObject, useRef } from 'react';

// custom react hook to implement blur logic on click event
// function returns ref and callback
// ref should be set to anchor, e.g. <a ref={ref} ...></a>
// callback should be called without params in onClick handler,
// e.g. <a onClick={(e)=> { forceBlur(); ... } />
export function useForceBlur(): [RefObject<HTMLAnchorElement>, () => void] {
  const ref = useRef<HTMLAnchorElement>(null);
  const forceBlur = () => {
    if (ref?.current?.blur) {
      ref.current.blur();
    }
  };
  return [ref, forceBlur];
}