webscopeio / react-health-check

Lightweight React hook for checking health of API services.

React Health Check 🏥

Lightweight React hook for checking health of API services.

---

Installation 🧑‍🔧

npm i @webscopeio/react-health-check

or

yarn add @webscopeio/react-health-check

Examples 😲

• Basic
• Global configuration

Usage ❓

const { available, refresh } = useHealthCheck({
  service: {
    name: 'auth',
    url: 'https://example.com/auth/health',
  },
  onSuccess: ({ service, timestamp }) => {
    console.log(`Service "${service.name}" is available since "${timestamp}" 🎉`);
  },
  onError: ({ service, timestamp }) => {
    console.log(`Service "${service.name}" is not available since "${timestamp}" 😔`);
  },
});

You can also create a global configuration so you don't have to define services and callbacks every time:

// App wrapper
<HealthCheckConfig
  value={{
    services: [
      {
        name: 'auth',
        url: 'https://example.com/auth/health',
      },
      {
        name: 'payment',
        url: 'https://example.com/payment/health',
      },
    ],
    onSuccess: ({ service, timestamp }) => {
      console.log(`Service "${service.name}" is available since "${timestamp}" 🎉`);
    },
    onError: ({ service, timestamp }) => {
      console.log(`Service "${service.name}" is not available since "${timestamp}" 😔`);
    },
  }}
>
  <App />
</HealthCheckConfig>;

// Later in some child component
const { available } = useHealthCheck('auth');

Configuration 🛠

useHealthCheck() hook accepts a configuration object with keys:

Key	Type	Description
service	Service<S = string>	Object defining an API service to be checked.
onSuccess	(state: ServiceState<S>) => void;	Callback which should be called when API service becomes available again.
onError	(state: ServiceState<S>) => void;	Callback which should be called when API service becomes unavailable.
refreshInterval	number	Polling interval for health checks in milliseconds. Default value: 5000
refreshWhileHidden	boolean	Determines whether polling should be paused while browser window isn't visible. Default value: false

Global configuration accepts the same keys as useHealthCheck() hook with the exception of "service". You need to specify array of "services" when using global configuration.

License 💼

MIT | Developed by Webscope.io