Thoughts on a hook interface and architecture

[chrisbolin]

// these are the only 4 exports (no more Detector)
import { Online, Offline, useOnline, useOnlineEffect } from "react-detect-offline";

function Demo () {
  // demo the 4 interfaces provided by react-detect-offline
  const online = useOnline({
    polling: {
      enabled: true,
      url: "https://...",
      timeout: 3000,
      interval: 8000,
    },
    // ... any other future options
  });
  useOnlineEffect(online => {
    console.log("Connection change!");
    console.log(`You are now ${online ? "online" : "offline"}`);
  }, {
    polling: false
  })
  return (
    <div className={online ? "main" : "warning"}>
      Some text
      <Online>Click to refresh</Online>
      <Offline>You are currently offline.</Offline>
    </div>
  );
}

Key points:

• useOnlineEffect is the CORE functionality. Everything is based on it.
• useOnline uses useOnlineEffect and useState. It returns a boolean.
• Online and Offline work exactly as they do in v2, but under the hood use useOnline
• no more Detector - people could just use useOnline hook*
• no more onChange prop - people could just use useOnlineEffect*
• • for the deprecations, you could still include them, but recommend people use other things. that way ppl could still upgrade, but you wouldn't break their code.

[chrisbolin]

forgive my javascript, i haven't written it lately 😂

[EltonCarreiro]

That looks pretty good and aligned with the latest React code. :)

[tamizharasank]

I'm getting this error GET https://ipv4.icanhazip.com/ net::ERR_NAME_NOT_RESOLVED (anonymous) on my react app but i'm using stable internet connection only. Please find the below attachement and please help me to solve this.

[geekskai]

You can take a look at this, this is the implementation of the reference v3 version https://github.com/geekskai/react-network-detect