Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webscopeio/react-health-check
Lightweight React hook for checking health of API services.
https://github.com/webscopeio/react-health-check
api check detect health hook offline react
Last synced: about 1 month ago
JSON representation
Lightweight React hook for checking health of API services.
- Host: GitHub
- URL: https://github.com/webscopeio/react-health-check
- Owner: webscopeio
- License: mit
- Created: 2018-12-21T11:24:09.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T00:30:28.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T17:30:57.890Z (2 months ago)
- Topics: api, check, detect, health, hook, offline, react
- Language: TypeScript
- Homepage:
- Size: 1.87 MB
- Stars: 34
- Watchers: 4
- Forks: 9
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `@webscopeio/react-health-check`
- awesome-react-hooks-cn - `@webscopeio/react-health-check`
- awesome-react-hooks - `@webscopeio/react-health-check`
- awesome-react-hooks - `@webscopeio/react-health-check`
README
# React Health Check 🏥
Lightweight React hook for checking health of API services.
[](https://www.npmjs.com/package/@webscopeio/react-health-check)
[](./LICENSE)
---
## Installation 🧑🔧
```
npm i @webscopeio/react-health-check
```
or
```
yarn add @webscopeio/react-health-check
```
## Examples 😲
- [Basic](examples/basic)
- [Global configuration](examples/global-conf)
## Usage ❓
```ts
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:
```tsx
// App wrapper
{
console.log(`Service "${service.name}" is available since "${timestamp}" 🎉`);
},
onError: ({ service, timestamp }) => {
console.log(`Service "${service.name}" is not available since "${timestamp}" 😔`);
},
}}
>
;
// Later in some child component
const { available } = useHealthCheck('auth');
```
## Configuration 🛠
`useHealthCheck()` hook accepts a configuration object with keys:
| Key | Type | Description |
| ------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| service | `Service` | Object defining an API service to be checked. |
| onSuccess | `(state: ServiceState) => void;` | Callback which should be called when API service becomes available again. |
| onError | `(state: ServiceState) => 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