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

React Hook to apply a fade-in effect to any React element.

import { useEffect, useRef } from "react";

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

	const element = useRef();

	useEffect(() => {
		if (element.current) {
			const { current } = element;
			current.style.transition = `opacity ${duration}s ease-in-out ${delay}s`;
			current.style.opacity = 1;
		}
	}, []);
	return { ref: element, style: { opacity: 0 } };
};