/react-power-up-Library

💥🟢Provide a custom Hooks and utility for develop your application faster

Primary LanguageJavaScriptMIT LicenseMIT

React-power-up

Repository

Features

  • useOnline
  • New update coming soon...

Install

  npm install react-power-up

Quickstart

import { useOnline } from "react-power-up";

const Home = () => {
  //Check internet is available or not
  const isOnline = useOnline();

  return (
    <div>
      <h1>Home</h1>
      <h1>{isOnline ? "🟢" : "🔴"}</h1>
    </div>
  );
};
export default Home;

Hooks Details

  • useOnline
import { useEffect, useState } from "react";

const useOnline = () => {
    const [isOnline, setIsOnline] = useState(true);

    useEffect(() => {
        //LOGIC FOR CHECK USER NETWORK IS ONLINE OR OFFLINE
        const handleOnline = () => {
            setIsOnline(true);
        };
        const handleOffLine = () => {
            setIsOnline(false);
        };
        //EVENT LISTENER
        window.addEventListener("online", handleOnline);
        window.addEventListener("offline", handleOffLine);

        return () => {
            //CLEAN-UP
            window.removeEventListener("online", handleOnline);
            window.removeEventListener("offline", handleOffLine);
        };
    }, []);
    //RETURN STATEMENT
    return Boolean(isOnline);
};
export default useOnline;

Contributors