How to use @rooks/use-timeout - 3 common examples

function UseTimeoutDemo() {
  function doAlert() {
    window.alert("timeout expired!");
  }
  const { start, clear, isActive } = useTimeout(doAlert, 2000);
  return (
    <>
      <button> Start timeout </button>
      <button> Clear timeout </button>
      <p> {isActive ? "timeout is active" : "timeout is inactive"} </p>
    
  );
}

const usePopup = () => {
  const [popup, setPopupText] = useState(null);
  const [popupVisible, setPopupVisible] = useState(false);

  const { start, clear } = useTimeout(() => {
    setPopupVisible && setPopupVisible(false);
    clear && clear();
  }, popupTimeout);

  const setPopup = (content: any) => {
    clear();
    setPopupText(content);
    setPopupVisible(true);
    start();
  };

  const onDismissPopup = () => {
    setPopupVisible(false);
    clear();
  };

export function Tooltip ({
  children,
  content,
  flip,
  open = null,
  defaultOpen = false,
  onToggle = () => null,
  offset = 0,
  closeTimeout = 1000,
  placement = TooltipPlacement.TOP,
  onOutsideClick,
  ...blockProps
}: TooltipProps & BlockProps) {
  const [isMouseOverContent, setMouseOverContent] = useState(false)
  const { isOpen, open: setOpen, close } = useClosable(defaultOpen, open, onToggle)
  const closeTimer = useTimeout(() => { if (!isMouseOverContent) close() }, closeTimeout)

  useEffect(closeTimer.clear, [isOpen, closeTimeout])
  useEffect(() => {
    if (!isMouseOverContent && open === null) {
      closeTimer.start()
    }
  }, [isMouseOverContent])

  return (
     (
         {
            if (open === null) {
              closeTimer.clear()