https://github.com/filipchalupa/use-connection-state

React hook to detect online and offline network state.
https://github.com/filipchalupa/use-connection-state

Last synced: about 15 hours ago
JSON representation

React hook to detect online and offline network state.

• Host: GitHub
• URL: https://github.com/filipchalupa/use-connection-state
• Owner: FilipChalupa
• Created: 2023-05-10T14:25:45.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-16T12:44:39.000Z (6 months ago)
• Last Synced: 2024-10-29T22:00:37.983Z (9 days ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/use-connection-state
• Size: 243 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Connection state hook [![npm](https://img.shields.io/npm/v/use-connection-state.svg)](https://www.npmjs.com/package/use-connection-state) ![npm type definitions](https://img.shields.io/npm/types/use-connection-state.svg)

React hook to detect online and offline network state.

You can play with it yourself here [filipchalupa.cz/use-connection-state](https://filipchalupa.cz/use-connection-state/).

## Installation

```bash

npm install use-connection-state

```

## Usage

```jsx

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

const App = () => {

	const connection = useConnectionState()

	return (

		

			
Connection state

			
Online: {connection === 'online' ? 'yes' : 'no'}

		

	)

}

```


### Endpoints

```jsx

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 (

		

			
Connection state

			
Online: {connection === 'online' ? 'yes' : 'no'}

		

	)

}

```


## Development

- Install dependencies: `npm ci`

- Run: `npm run dev`