30 lines
905 B
TypeScript
30 lines
905 B
TypeScript
"use client";
|
|
import React from "react";
|
|
|
|
export type DelayProps = { children?: React.ReactNode, delay?: number, useOpacity?: boolean, onComplete?: () => void, shouldWait?: boolean };
|
|
export default function Delay({ children, delay, useOpacity, onComplete, shouldWait }: DelayProps) {
|
|
const [show, setShow] = React.useState(false);
|
|
React.useEffect(() => {
|
|
if (delay == undefined) {
|
|
return;
|
|
}
|
|
|
|
if (shouldWait) {
|
|
return;
|
|
}
|
|
const intervalRef = setInterval(() => {
|
|
setShow(true);
|
|
if (onComplete) {
|
|
setInterval(onComplete, 0);
|
|
}
|
|
}, delay);
|
|
|
|
return () => clearInterval(intervalRef);
|
|
}, [shouldWait, delay, onComplete]);
|
|
|
|
if (useOpacity) {
|
|
return <div className={`${ show ? "opacity-100" : "opacity-0"} transition-opacity ease-in-out duration-300`}>{children}</div>
|
|
}
|
|
|
|
return <>{show && children}</>
|
|
} |