cwise89/react-detect-offline

Plans for v3 Major

Closed this issue · 11 comments

chrisbolin commented

I am currently working on planning for v3, the next major release of this simple library.

I'd love feedback on the plans, if you have any.

New Features and Fixes

  • Hooks. A useOnline hook for easy and advanced use. Addresses #22.
  • TypeScript. Library written in TS. Declarations included in package. Addresses #18.
  • Ping Performance. Single ping every interval no matter how many components and hooks use it. Addresses #23.

Breaking Changes

  • Remove Detector component. Because hooks are now available, we can remove this render-prop component. Render props can be hard, and caused issues for some people. (for example #25 and #27)

Non-Breaking Changes

  • Remove PropTypes. PropTypes bloat the bundle. They aren't necessary with TypeScript.
hartzis commented

Do you have a tentative API for useOnline you can show?

  • 👍2
chrisbolin commented

Here are my current thoughts:

const online = useOnline(options);

where online is boolean and options is something like

interface Options {
  pollingInterval?: number;
  pollingTimeout?: number;
  pollingEnabled?: boolean;
  pollingURL?: string;
  pollingMethod?: string;
  browserEventsEnabled?: boolean;
}
hartzis commented

What is browserEventsEnabled and its default?

hartzis commented

💡 What if you the polling functionality was independent of the hook/component?

  • as stated in the readme94% of worldwide (98% of US) browser traffic supports the web spec, so why always bundle it?
  • better tree shaking
  • puts the onus on the user to determine when/if needed via browser detection?

for >90% of uses:

import { useOnline } from 'react-detect-offline'
...
const online = useOnline()
if (online) return <Online />
return <Offline />

User decides to perform browser detection and supply default polling

import { useOnline, setupPoll } from 'react-detect-offline';

let poller;
if (oldBrowser) {
  poller = setupPoll(options)
}

...
const online = useOnline({ poller });

the created poller from setupPoll would have a .subscribe() method that returns an unsubscribe clean up method?

chrisbolin commented

Oh that's a really interesting idea. What about just having two hook exports?

import { useOnline, useOnlineWithPolling } from 'react-detect-offline';
hartzis commented

@chrisbolin i like the idea of two hook exports, but maybe splitting is just taking it too far? Maybe it's fine to just include the polling since th size is so small anyways?

jmptr commented

My preference is to allow the developer to specify polling behavior in the provider.

<DetectOffline pollMs={15000}>
  {children}
</DetectOffline>
  • 👍2
dmikester1 commented

Awesome! Do you have an ETA on v3? For the current version, how would I set a state var once the app goes offline, and set it back when it goes online?

moharnadreza commented

Hi @chrisbolin, Are you working on useOnline Hook? If not I'd like to work on it.

hartzis commented
  • 👍1
chrisbolin commented

@themzed yeah definitely take a swing at all :)

There are other offline hooks too, though, if you don't want to build your own: https://github.com/rehooks/online-status