UNPKG

is-user-online

Version:
67 lines (45 loc) 1.56 kB
# is-user-online A simple and lightweight custom React Hook to determine whether the user is online or offline. This hook leverages the browser's `navigator.onLine` API and listens for network changes via the `online` and `offline` events. --- ## Installation Install the package via npm: ``` npm install is-user-online ``` or via yarn: ``` yarn add is-user-online ``` Example: jsx ``` import React from 'react'; import useIsUserOnline from 'is-user-online'; const OnlineStatus = () => { const isOnline = useIsUserOnline(); return ( <div> <h1>{isOnline ? 'You are online! 🌐' : 'You are offline! ❌'}</h1> </div> ); }; export default OnlineStatus; ``` API useIsUserOnline() Returns a boolean value: true - if the user is online. false - if the user is offline. This value updates automatically whenever the network status changes. ### Features Lightweight and easy to integrate. Real-time updates for network status. Works out-of-the-box with React functional components. ### How It Works The hook uses the navigator.onLine API to get the initial online status. It attaches event listeners for the online and offline events. When the user's network status changes, the hook updates the state, triggering a re-render in your component. Cleanup This hook ensures that the online and offline event listeners are removed when the component using the hook is unmounted. No need to handle cleanup manually. Contributing Contributions are welcome! Feel free to open issues or submit pull requests to improve the library.