Learn React Hooks

The Online Status Hook

In some web apps, it makes sense to implement an offline mode; for example, if we want to be able to edit and save drafts for posts locally, and sync them to the server whenever we are online again. To be able to implement this use case, we can use the useOnlineStatus Hook.

The Online Status Hook returns an object with an online value, which contains true if the client is online; otherwise, it contains false. It works as follows:

import React from 'react'import { useOnlineStatus } from 'react-hookedup'export default function App () {    const { online } = useOnlineStatus()    return <div>You are {online ? 'online' : 'offline'}!</div>}

The previous component will display You are online!, when an internet connection is available, ...