useOnlineStatus

Returns if the user has access to the internet or not.

Installation

npx rabbithook@latest add use-online-status

Usage

App.tsx

import useOnlineStatus from "@/hooks/use-online-status";

function Component() {
  const isOnline = useOnlineStatus();

  return (
    <p>isOnline: { isOnline ? "Yes" : "No" }</p>
  );
}

Code

Typescript

use-online-status.ts

import { useState } from "react";
import useEventListener from "../use-event-listener";

function useOnlineStatus() {
  const [isOnline, setOnlineStatus] = useState(navigator.onLine);

  useEventListener("online", () => setOnlineStatus(navigator.onLine));
  useEventListener("offline", () => setOnlineStatus(navigator.onLine));

  return isOnline;
}

export default useOnlineStatus;

Javascript

use-online-status.js

import { useState } from "react";
import useEventListener from "../use-event-listener";

function useOnlineStatus() {
  const [isOnline, setOnlineStatus] = useState(navigator.onLine);

  useEventListener("online", () => setOnlineStatus(navigator.onLine));
  useEventListener("offline", () => setOnlineStatus(navigator.onLine));

  return isOnline;
}

export default useOnlineStatus;