@nooks_seo/use-fade-in/useFadeIn.js

React Hook to easily add a fade-in animation to any element.

import { useEffect, useRef } from 'react';

export const useFadeIn = (time = 1, delay = 0) => {
  if(typeof time !== "number" || typeof delay !== "number") {
    return
  }

  const element = useRef(null);

  useEffect(() => {
    if(!element.current) return;
    setTimeout(() => {
      element.current.style.transition = `opacity ${time}s`;
      element.current.style.opacity = '100';

    }, delay);

  }, []);

  return {ref:element , style: {opacity: 0}}
}