Skip to content

Instantly share code, notes, and snippets.

View patrickcze's full-sized avatar

Patrick patrickcze

View GitHub Profile
@patrickcze
patrickcze / useOnlineStatus.tsx
Created March 27, 2021 21:22
A upgraded version of our hook.
import React, { useState, useEffect, useContext } from "react";
const PING_RESOURCE = "/ping.txt";
const TIMEOUT_TIME_MS = 3000;
const onlinePollingInterval = 10000;
const timeout = (time: number, promise: Promise) => {
return new Promise(function(resolve, reject) {
setTimeout(() => {
reject(new Error("Request timed out."));
@patrickcze
patrickcze / Home.tsx
Created March 27, 2021 21:10
An example component using the useOnlineStatus hook
import React from "react";
import { useOnlineStatus } from "../../utilities/useOnlineStatus";
const Home: React.FC = () => {
const isOnline = useOnlineStatus();
return <div>I am {isOnline ? "online" : "offline"}!</div>;
};
export default Home;
@patrickcze
patrickcze / App.tsx
Created March 27, 2021 21:05
OnlineStatusProvider example app
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "../Home";
import { OnlineStatusProvider } from "../../utilities/useOnlineStatus";
const App: React.FC = () => {
return (
<OnlineStatusProvider>
<Router>
@patrickcze
patrickcze / useOnlineStatus.tsx
Last active August 18, 2023 12:59
A basic hook to indicate if the user is online or offline
import React, { useState, useEffect, useContext } from "react";
const OnlineStatusContext = React.createContext(true);
export const OnlineStatusProvider: React.FC = ({ children }) => {
const [onlineStatus, setOnlineStatus] = useState<boolean>(true);
useEffect(() => {
window.addEventListener("offline", () => {
setOnlineStatus(false);