react click outside of container / form

react-click-outside.js

// answer comes from: https://stackoverflow.com/questions/32553158/detect-click-outside-react-component/54292872#54292872
// this adds typescript and I've used this for a form

/*
  Custom Hook
*/
function useOuterClick(callback: any) {
  const innerRef = useRef() as React.MutableRefObject<HTMLInputElement>;
  const callbackRef = useRef() as React.MutableRefObject<HTMLInputElement>;

  // set current callback in ref, before second useEffect uses it
  useEffect(() => {
    // useEffect wrapper to be safe for concurrent mode
    callbackRef.current = callback;
  });

  useEffect(() => {
    document.addEventListener("click", handleClick);
    return () => document.removeEventListener("click", handleClick);

    // read most recent callback and innerRef dom node from refs
    function handleClick(e: any) {
      if (
        innerRef.current &&
        callbackRef.current &&
        !innerRef.current.contains(e.target)
      ) {
        // @ts-expect-error
        callbackRef.current(e);
      }
    }
  }, []); // no need for callback + innerRef dep

  return innerRef; // return ref; client can omit `useRef`
}

function MyForm() {
  const innerRef = useOuterClick((e: any) => {
    props.handleSave(e, item);
  });
  return (
    <div className="form-container" ref={innerRef}>
      <form onSubmit={(e) => props.handleSave(e, item)}>
        <input type="text"/>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}