useOnline

import "./styles.css";
import { useOnline } from "rooks";

function App() {
  const online = useOnline();
  console.log("I'm online");

  return (
    <div>
      <h1>Rooks: useOnline example</h1>

      <hr></hr>
      <div style={{ backgroundColor: "lightblue" }}>
        Status:You are {online ? "Online" : "Offline"}
      </div>
    </div>
  );
}

export default App;

import { useOnline } from "rooks";

function ConnectionBanner() {
  const isOnline = useOnline();

  return (
    <div
      style={{
        padding: "12px 16px",
        borderRadius: 8,
        background: isOnline ? "#dcfce7" : "#fee2e2",
        color: isOnline ? "#166534" : "#991b1b",
      }}
    >
      {isOnline
        ? "Connected. Changes will sync normally."
        : "Offline mode. Changes will sync when you reconnect."}
    </div>
  );
}