react-detect-offline-api

Install

npm install --save react-detect-offline-api

Demo

Usage

import * as React from 'react'

import ReactDetectOfflineAPI from 'react-detect-offline-api'

class Example extends React.Component {
  render () {
    return (
      <ReactDetectOfflineAPI
        apiUrl={'http://yourapiurl.com'}
        checkInterval={5000}
        onOnline={() => {
          console.log('Online')
        }}
        onOffline={error => {
          console.log(error && error.status ? 'Offline with error:' + error.status : 'Offline')
        }}
        initialStatusCallback={status => {
          console.log('Initial status ', status ? 'online' : 'offline')
        }}
        resolveOnlineStatusFromPromise={response => response.status === 'healthy'}
        render={({ online }) =>
          online
            ?
            <div>Online</div>
            :
            <div>Offline</div>
        } />
    )
  }
}

Please note that if a request is blocked by CORS policy, this component will not work.

| Props | Required | Type | Description | | ----- | -------- | ---- | ----------- | | apiUrl | true | string | API to check | | checkInterval | true | number | null | Polling interval. If null, there will be only one check on componentDidMount | | render | false | Function | We're using Render Props to render online of offline component. See an example for more info. | | onOnline | false | Function | Called once an API becomes online and was offline | | onOffline | false | Function | Called once an API becomes offline and was online, in case API call was unsuccessful, it gets error as parameter| | resolveOnlineStatusFromPromise | false | (response: Object) => boolean | Called to detect online status from response after successful API call, otherwise every successful API call would be considered as online status | | initialStatusCallback | false | (status: boolean) => void | Calledback that returnes an initial status |

License

MIT | Developed by Webscope.io