[useFadeOut] - ReactJS hook to fadeOut an element using the opacity and display styles.

useFadeOut.js

import {useLayoutEffect, useRef} from "react";

export default function useFadeOut(ref, fadeTime, visible)
{
  const timerId = useRef();

  useLayoutEffect(() =>
  {
    clearTimeout(timerId.current);

    if (ref.current)
    {
      ref.current.style.opacity = visible ? 1 : 0;
      ref.current.style.transition = `opacity ${fadeTime}ms ease-in-out`;

      if (visible)
      {
        ref.current.style.display = "block";
      }
      else
      {
        timerId.current = setTimeout(() => {ref.current.style.display = "none";}, fadeTime);
      }
    }
  }, [ref, visible, fadeTime]);
}

// usage
//
const loaderRef = useRef(); // the ref to the element to be transitioned
useFadeOut(loaderRef, 500, visible); // 500ms transition time, `visible` state variable to trigger the transition