⚡ Offline detector and indicator for your React app.

Overview

Offline detector and indicator for your React app.

Demo · Report Bug · Request Feature

Preview
Shadow

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.

View Demo.

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.

Github Star

Contribute

To contribute, see the contributing guide.

License

MIT License

Comments
Releases(v1.0.0)
Owner
Ariful Alam
⚡ Software Engineer | Open Source Enthusiast | PHP | Laravel | JavaScript | React | Node.js ⚡
Ariful Alam
This application integrates Twilio SMS with a ToDo app. As you add tasks to your Todo app, you have the option to send SMS reminders to your cell phone.

This application integrates Twilio SMS with a ToDo app. As you add tasks to your Todo app, you have the option to send SMS reminders to your cell phone. The days of forgetting a task or meeting are no more with ToodleDo app.

Ricardo Salcido 1 Dec 14, 2021
Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

null 657 Dec 1, 2022
React Todo App allows you to create, edit, delete and view your todos. It is a simple todo app built with React, Linters and Localstorage.

React Todo App React Todo App allows you to create, edit, delete and view your todos. It is a simple todo app built with React, Linters and Localstora

Didier Peran Ganthier 6 Nov 7, 2022
A simple and convenient way to monitor the activity and performance of your servers. Probably more ergonomic than your average terminal htop.

A simple and convenient way to monitor the activity and performance of your servers. Probably more ergonomic than your average terminal htop.

Philippe Négrel-Jerzy 255 Dec 1, 2022
Flame is self-hosted startpage for your server. Easily manage your apps and bookmarks with built-in editors.

Flame Description Flame is self-hosted startpage for your server. Its design is inspired (heavily) by SUI. Flame is very easy to setup and use. With b

null 3.2k Nov 29, 2022
With Expense Tracker you control your expenses and take control of your finances

?? Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: React

carlos viana 1 Dec 31, 2021
Codemore is the open platform to help you enhance your problem solving skill, expand your knowledge of data structures and algorithms.

Platform to help you enhance your problem solving skills, expand your knowledge of data structures and algorithms.

Chandragupt Gosavi 2 Jun 8, 2022
Make commits to your repositories to keep your cute Repogotchis alive. Built in React Typescript with Firebase for the UQCS Hackathon 2022.

Make commits to your repositories to keep your cute Repogotchis alive. Built in React Typescript with Firebase for the UQCS Hackathon 2022.

Paul Clarke 6 Sep 6, 2022
A Disney+ Clone that you can sign in with your Google AccountA Disney+ Clone that you can sign in with your Google Account

Disney+ Clone with ReactJS A Disney+ Clone that you can sign in with your Google Account. Click demo to try it by yourself! Disney+ Clone Demo Link Yo

Yusuf İşbilir 14 Jun 30, 2022
Share your Grocery List with your Friends

Lixt is react-native application that allows for users to be able to share their of grocery items with their friends and families. Features Abilty to

Christopher Landaverde 1 Jun 4, 2021
Party Parrot as a Service is your one-stop-shop for all your party parrot needs

Demo https://party.highlight.run Team Cameron Brill (@c00brill) Jay Khatri (@theJayKhatri) John Pham (@JohnPhamous) About Party Parrot as a Service Pa

Highlight 38 Apr 13, 2022
Check your device when you have anything to change on your PC or mobile

Check your device when you have anything to change on your PC or mobile.

ChoGeonHo 11 Aug 6, 2022
FullStack app containing an API (NestJS), a web app (React) and a mobile app (React Native).

Food Order This project is a workspace containing an API (NestJS), a web app (React) and a mobile app (React Native). Content Food Order Content Get S

Germain Michaud 1 Apr 24, 2022
Render and position native windows as simply as you render and position tooltips in your React app.

Portal Windows Render and position windows as simply as you render and position tooltips in your React app. Getting started To use Portal Windows, you

Tandem 63 Nov 8, 2022
This is a To do app developed using to consolidate your knowledge about React, components, props, state, and hooks. A user can add, delete, updated and mark items as completed

To-do-app-with-React This is a To do app developed using React & Lifecycle methods to consolidate knowledge about React, components, props, state, hoo

Jonathan Kayizzi 5 Nov 10, 2022
A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powered by RAWG API.

Game Store Monorepo A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powe

Vu Nguyen 117 Nov 30, 2022
Supercharge your react app with simple Flux-pattern based Global State, using react owns `useReducer` and eliminate the need for redux!

Supercharge your react app with simple Flux-pattern based Global State, using react owns `useReducer` and eliminate the need for redux!

EthicDevs 2 Aug 26, 2022
Free React Admin Dashboard made with MUI's components, React and of course Next.js to boost your app development process!

Material Kit - React Free React Admin Dashboard made with MUI's components, React and of course Next.js to boost your app development process! Demo Da

Francisco Ruiz 5 Nov 5, 2022
A React app that uses Spotify's Web API to get your favorite tracks, artists, and recently played songs.

Explorify A React app that uses Spotify's Web API to get your favourite tracks, artists and recently played songs. You can also filter them by timelin

Saket S 27 Jul 21, 2022