Connection state hook

React hook to detect online and offline network state.

You can play with it yourself here filipchalupa.cz/use-connection-state.

Installation

npm install use-connection-state

Usage

import { useConnectionState } from 'use-connection-state'

const App = () => {
	const connection = useConnectionState()

	return (
		<main>
			<h1>Connection state</h1>
			<p>Online: {connection === 'online' ? 'yes' : 'no'}</p>
		</main>
	)
}

Endpoints

import { createUseConnectionStateHook } from 'use-connection-state'

// Add endpoints to detect connection state. The library will try to fetch these endpoints.
const useConnectionStateWithEndpoints = createUseConnectionStateHook({
	endpoints: [location.href, 'https://www.google.com'],
})

const App = () => {
	const connection = useConnectionStateWithEndpoints()

	return (
		<main>
			<h1>Connection state</h1>
			<p>Online: {connection === 'online' ? 'yes' : 'no'}</p>
		</main>
	)
}

Development

• Install dependencies: npm ci
• Run: npm run dev