Browser functionality-related hooks : online/offline
using custom Hooks in React, with Browser functionality we can check whether the Internet connection is Online or Offline
// it reutrn true or false
window.navigator.onLine
import React, { useState,useEffect } from 'react';
import axios from 'axios'
function useIsOnline(){
const [isOnline, setIsOnline] = useState(window.navigator.onLine)
useEffect(() => {
window.addEventListener('online', () => setIsOnline(true));
window.addEventListener('offline', () => setIsOnline(false));
}, [])
return isOnline
}
function App(){
const isOnline = useIsOnline()
return (
<div>
{isOnline?<div>{todos.map((eachTodo)=><Track todo= {eachTodo}/>) }</div>
:<h1>you are offline baby </h1>}
</div>
)
}
function Track({todo}){
return <div>
{todo.id}<br/>
{todo.title}<br/>
{todo.description}<br/>
{todo.completed}<br/>
</div>
}
export default App