import { useStatus } from "@pyr33x/hooks";
 
export const App = () => {
  const status = useStatus();
 
  return (
    <div>
      <p>{status ? "Offline" : "Online"}</p>
    </div>
  );
};

import { useEffect, useState } from "react";
 
type Status = () => boolean;
 
export const useStatus: Status = () => {
  const [offline, setOffline] = useState<boolean | null>(null);
 
  useEffect(() => {
    const handleStatus = () => {
      setOffline(!offline);
    };
    addEventListener("offline", handleStatus);
    addEventListener("online", handleStatus);
 
    return () => {
      removeEventListener("online", handleStatus);
      removeEventListener("offline", handleStatus);
    };
  }, [offline]);
 
  return !!offline;
};