⚡ Offline detector and indicator for your React app.

Demo · Report Bug · Request Feature

Just wrap your react components with ReactOfflineIndicator. When there is no internet connection, it will display offline page. When it comes back online, previous page will be restored.

Installation

Install via NPM.

npm install react-offline-indicator

Or via Yarn.

yarn add react-offline-indicator

Usage

import ReactOfflineIndicator from 'react-offline-indicator';

ReactDOM.createRoot(document.getElementById('root')).render(
  <ReactOfflineIndicator>
    <App />
  </ReactOfflineIndicator>
);

A hook useOfflineStatus indicating offline status is also available.

import { useOfflineStatus } from 'react-offline-indicator';

function App() {
  const isOffline = useOfflineStatus();

  return isOffline ? 'Offline' : 'Online';
}

Support

You can show your support by starring this project.

Contribute

To contribute, see the contributing guide.

License

MIT License