Logo

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
React Custom Hooks (useNetworkStatus)

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
Enter fullscreen mode Exit fullscreen mode

USE CASE 🔊

import React from 'react';
import { useNetworkStatus } from 'share/hooks';

function Index() {
  const isOnlie = useNetworkStatus();
  return <div>Index</div>;
}

export default Index;
Enter fullscreen mode Exit fullscreen mode

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
Favicon
Mastering Navigation Control in React with useCallbackPrompt and useBlocker 🚦
Favicon
Custom Hooks in React: Reusing Logic Across Components
Favicon
Fixing UI Update Issues with Custom Hooks in React
Favicon
Custom Hooks in React: A Guide to Creation and Usage
Favicon
React: leveraging custom hooks to extract reusable logic
Favicon
Custom Hooks
Favicon
Custom Hooks in React
Favicon
Mobile Orientation (React-Native)
Favicon
Reusing Logic in React with Custom Hooks: a Practical guide
Favicon
Harnessing Firebase in React with Custom Hooks: A Practical Guide
Favicon
Building Powerful React Components with Custom Hooks
Favicon
React Custom Hooks (useNetworkStatus)
Favicon
React Custom Hooks (useMediaPermission)
Favicon
React Custom Hooks (useDebounce)
Favicon
How to Create a Counter App with useReducer and Custom Hooks
Favicon
How to create custom Hooks in React.Js?
Favicon
React Slideshow Component with autoplay, fullscreen mode and expand all
Favicon
React Portals: create and open modals with keyboard keys
Favicon
Learn Something on React JSX and Hooks
Favicon
How to create Tabs in ReactJs using Hooks ?
Favicon
Simple hook to handle featue flags
Favicon
React custom hooks to update form data
Favicon
useIpAdrress()
Favicon
Custom hook useScroll.tsx :: React TypeScript
Favicon
useQuery() with React Router Dom
Favicon
React Custom Hooks
Favicon
useGeoPosition Hook - A Custom React Hook to grab latitude and longitude from a given address.
Favicon
`useBackButton` hook to handle back button behavior in React Native
Favicon
Form in Modal using React hooks – mistakes and lesson learnt

Featured ones: