react-connectivity

A react overlay component with connection checks.

Motivation

I wanted to build a system monitoring interface with multiple panes from different endpoints. From which I need indicators for connection failures and reconnections.

Demo

Link

Installation and Usage

yarn add react-connectivity

import Connectivity from 'react-connectivity'
 
<div className="your wrapper">
  <Connectivity url="your endpoint" interval=3000 />
  ...
</div>

Design

open for discussion.

Pattern?

Observable pattern polling; hooks for component side effects.

Styling?

The component will add a overlay relative to the outer element.

Currently using plain CSS, plan to migrate to CSS-in-JS for exposing more sytling apis.

Testing?

Basic unit test for component, plan to test Observables.

Caveats

• With default timeout by 3 seconds, slower-than-3G network might be treated as disconnected.

Related

• HubSpot/offline
• sindresorhus/is-reachable