dev-resources.site
for different kinds of informations.
React Custom Hooks (useNetworkStatus)
Published at
10/19/2023
Categories
react
reactjsdevelopment
reacthooks
customhooks
Author
sundarbadagala081
Author
17 person written this
sundarbadagala081
open
INTRO 🔊
Hello World! 👋
Today we are discussing another custom hook named useNetworkStatus
🔥. In this post, we will discuss this hook's usage, code and use case.
USAGE 🔊
Sometimes developers want to know whether the user is offline
or online
. By using JavaSCript we can find the user status (offline/online). But creating a custom hook and using it whenever we want is better than using JavaScript code every time right? For that purpose, we are creating one custom today.
CODE 🔊
import {useState,useEffect} from 'react'
const useNetworkStatus=()=> {
const [isOnline, setIsOnline] = useState(navigator.onLine);
useEffect(() => {
window.addEventListener('online', () => {
setIsOnline(navigator.onLine);
});
window.addEventListener('offline', () => {
setIsOnline(navigator.onLine);
});
return ()=>{
window.removeEventListener("online", setIsOnline);
window.removeEventListener("offline", setIsOnline);
}
});
return isOnline;
}
export default useNetworkStatus
USE CASE 🔊
import React from 'react';
import { useNetworkStatus } from 'share/hooks';
function Index() {
const isOnlie = useNetworkStatus();
return <div>Index</div>;
}
export default Index;
CONCLUSION 🔊
By using the above hook, we can find whether is online or not.
I hope you people like the useNetworkStatus
hook. We will meet with another hook in another post.
Peace 🙂
customhooks Article's
29 articles in total
Mastering Navigation Control in React with useCallbackPrompt and useBlocker 🚦
read article
Custom Hooks in React: Reusing Logic Across Components
read article
Fixing UI Update Issues with Custom Hooks in React
read article
Custom Hooks in React: A Guide to Creation and Usage
read article
React: leveraging custom hooks to extract reusable logic
read article
Custom Hooks
read article
Custom Hooks in React
read article
Mobile Orientation (React-Native)
read article
Reusing Logic in React with Custom Hooks: a Practical guide
read article
Harnessing Firebase in React with Custom Hooks: A Practical Guide
read article
Building Powerful React Components with Custom Hooks
read article
React Custom Hooks (useNetworkStatus)
currently reading
React Custom Hooks (useMediaPermission)
read article
React Custom Hooks (useDebounce)
read article
How to Create a Counter App with useReducer and Custom Hooks
read article
How to create custom Hooks in React.Js?
read article
React Slideshow Component with autoplay, fullscreen mode and expand all
read article
React Portals: create and open modals with keyboard keys
read article
Learn Something on React JSX and Hooks
read article
How to create Tabs in ReactJs using Hooks ?
read article
Simple hook to handle featue flags
read article
React custom hooks to update form data
read article
useIpAdrress()
read article
Custom hook useScroll.tsx :: React TypeScript
read article
useQuery() with React Router Dom
read article
React Custom Hooks
read article
useGeoPosition Hook - A Custom React Hook to grab latitude and longitude from a given address.
read article
`useBackButton` hook to handle back button behavior in React Native
read article
Form in Modal using React hooks – mistakes and lesson learnt
read article
Featured ones: