presence

1"use client";
2 
3import * as React from "react";
4 
5interface PresenceProps {
6  children:
7    | React.ReactElement
8    | ((props: { present: boolean }) => React.ReactElement);
9  present: boolean;
10}
11 
12function Presence({ children, present }: PresenceProps) {
13  const [mounted, setMounted] = React.useState(present);
14  const prevPresentRef = React.useRef(present);
15 
16  React.useEffect(() => {
17    const wasMounted = prevPresentRef.current;
18    const hasMounted = present;
19 
20    if (hasMounted) {
21      setMounted(true);
22    } else if (wasMounted && !hasMounted) {
23      setMounted(false);
24    }
25 
26    prevPresentRef.current = present;
27  }, [present]);
28 
29  if (!mounted) return null;
30 
31  return typeof children === "function"
32    ? children({ present: mounted && present })
33    : children;
34}
35 
36export { Presence };