check-online-offline
Version:
Elevate your React applications with the useCheckOnlineOffline hook, streamlining network status monitoring. Seamlessly adapt to changing connectivity through intuitive integration and advanced callback functions.
263 lines (202 loc) • 10.7 kB
Markdown
# Check-Online-Offline: React Network Status Hook with Callback Functionality
Elevate your React applications with the **useCheckOnlineOffline** hook, streamlining network status monitoring. Seamlessly adapt to changing connectivity through intuitive integration and advanced callback functions.
## Demo and usecase of the hook is available [Click Here](https://rajatrawal.github.io/check-online-offline-demo/).
For GitHub repo of demo app [Click Here](https://github.com/rajatrawal/check-online-offline-demo)
**Features:**
- **Real-time Monitoring:** Keep your finger on the pulse of network status changes in real time. React promptly to online and offline transitions for a seamless user experience.
- **Callback Flexibility:** Harness the power of callbacks to execute customized actions during network status shifts. Whether it's data synchronization, UI updates, or specialized behaviors, tailor your app's response effortlessly.
- **Simplicity of Integration:** Integration is a breeze with our developer-centric approach. Import the hook, attach your desired callbacks, and let it handle the intricacies of network status management.
- **Minimal Resource Impact:** Prioritizing efficiency, the hook ensures minimal resource consumption. Enjoy robust network monitoring without sacrificing application performance.
- **Comprehensive Documentation:** Empower your development journey with in-depth documentation and illustrative examples. Seamlessly incorporate network status tracking into your projects with ease.
## Installation
Open your terminal and navigate to your project directory. Use npm to install the package:
```bash
npm install check-online-offline
```
## **Usage**
The `useOnline` hook enables you to respond to changes in network connectivity by providing callback functions for both online and offline states. It takes an object with two properties: `online` and `offline`.
### **Online State**
When the application transitions from an offline state to an online state, the callback functions within the `online` array will be executed. Multiple functions can be included to perform various actions when the app goes online.
### **Offline State**
Conversely, when the application transitions from an online state to an offline state, the callback functions within the `offline` array will be executed. Similar to the `online` array, you can include multiple functions for different offline state actions.
## Usecase
### Import the Hook:
In the React component where you intend to use the network status monitoring, import the hook:
```jsx
import useOnline from 'check-online-offline';
```
### Utilize the Hook:
Within your component, employ the hook by invoking it. The **useOnline()** hook produces an output of either **true** or **false**. When the network is connected, it yields true otherwise, it returns false.
```jsx
status = useOnline();
// return true or false
```
### Using Callbacks with the Hook
```jsx
const handleOnline = () => {
console.log('App is now online.');
// Additional custom logic for online state
};
const handleOffline = () => {
console.log('App is now offline.');
// Additional custom logic for offline state
};
useOnline({ online: [handleOnline], offline: [handleOffline] });
```
1. **Callback Functions Setup:**
- `handleOnline`: This is a callback function that gets executed when the application transitions from an offline state to an online state. In this example, it logs a message to the console indicating that the app is now online. You can customize this function to include any specific actions that should be performed when the app becomes online.
- `handleOffline`: This is a callback function that gets executed when the application transitions from an online state to an offline state. It logs a message to the console indicating that the app is now offline. Similar to `handleOnline`, you can tailor this function to include any necessary actions for when the app goes offline.
2. **Invoking the `useOnline` Hook:**
- `useOnline({ online: [handleOnline], offline: [handleOffline] });`: Here, the `useOnline` hook is invoked with an object containing two properties:
- `online`: An array containing the `handleOnline` function. This means that when the app goes online, the code inside `handleOnline` will execute.
- `offline`: An array containing the `handleOffline` function. This indicates that when the app goes offline, the code within `handleOffline` will be executed.
3. **Passing multiple functions :**
```jsx
useOnline({
online: [handleOnline1, handleOnline2],
offline: [handleOffline1, handleOffline2]
});
```
### Use of hook in component:
The `StatusComponent` is a reusable React component designed to handle the display of a modal when the user is offline. It uses the `useOnline` hook from the `check-online-offline` library to determine the online/offline status. The component accepts various props like `headingText`, `descriptionText`, `buttonText`, `buttonLink`, and styling options to customize its appearance. When the user is offline, the modal becomes visible, showing the provided heading and description, along with a button to refresh the page. This component simplifies the process of notifying users when they lose internet connectivity and encourages them to refresh the page once the connection is reestablished.
```jsx
// Import the useOnline hook from the 'check-online-offline' library
import useOnline from 'check-online-offline';
// Import the CSS file for the component
import './StatusComponent.css';
// Define the StatusComponent functional component
const StatusComponent = (props) => {
// Destructure props to extract values for customization
const {
headingText,
descriptionText,
buttonText,
buttonLink,
headingCss,
descriptionCss,
buttonCss,
modalCss,
modalCssName
} = props;
// Use the useOnline hook to determine online/offline status
const isOnline = useOnline();
// Return JSX for the component
return (
<div style={{ display: isOnline ? 'none' : 'block' }}>
{/* Container for the dark background */}
<div className="darkBackgroundDiv">
{/* Modal container with custom styles */}
<div className={modalCssName} style={modalCss}>
{/* Heading section */}
<div className="heading" style={headingCss}>
{headingText}
</div>
{/* Description section */}
<p className='description' style={descriptionCss}>
{descriptionText}
</p>
{/* Button section */}
<a href={buttonLink} className="modalBtn">
<button className="reloadButton mt-3" style={buttonCss}>{buttonText}</button>
</a>
</div>
</div>
</div>
);
}
// Default props for the component
StatusComponent.defaultProps = {
modalCssName: "modalDiv",
headingText: "Oops, Looks Like You're Offline!🌐",
descriptionText: "Well, well, well... someone pulled the plug, didn't they? 🙃 No worries, even our pixels need a coffee break sometimes! ☕",
buttonLink: "/",
buttonText: "Refresh"
}
// Export the StatusComponent for use in other files
export default StatusComponent;
```
### Default CSS for StatusComponent :
File name - ``StatusComponent.css``
```css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
.darkBackgroundDiv {
background-color: rgb(0, 0, 0, 0.3);
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
font-family: 'Poppins', sans-serif;
}
.darkBackgroundDiv .modalDiv {
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
width: 50%;
background-color: white;
padding: 2rem;
border-radius: 10px;
text-align: center;
}
.modalDiv .heading {
font-size: 2rem;
font-weight: bold;
}
.modalDiv .description {
margin-top: 2rem;
}
.modalDiv .reloadButton {
background-color: rgb(41, 43, 40);
color: white;
font-size: 1rem;
padding: .3rem .8rem;
border: 2px solid #242322;
border-radius: 5px;
height: 3rem;
box-shadow: rgba(56, 56, 56, 0.2) 0px 2px 8px 0px;
width: 8rem;
cursor: pointer;
transition: all .3s ease-in-out;
margin-top: 2rem;
}
.modalDiv .reloadButton:hover {
opacity: .95;
text-decoration: none;
}
@media only screen and (max-width:1200px) {
.darkBackgroundDiv .modalDiv {
width: 70%;
}
}
@media only screen and (max-width:550px) {
.darkBackgroundDiv .modalDiv {
width: 90%;
padding: 2rem 1rem;
}
}
```
## **Contribution**
Contributions to the `check-online-offline` package are welcomed and encouraged! If you'd like to contribute, follow these steps:
1. **Fork the Repository:** Start by forking the official repository on GitHub.
2. **Clone the Fork:** Clone your forked repository to your local development environment.
```bash
git clone https://github.com/rajatrawal/check-online-offline.git
```
3. **Create a Branch:** Create a new branch for your changes.
```bash
git checkout -b feature/new-feature
```
4. **Make Changes:** Make your desired changes to the codebase.
5. **Test:** Ensure that your changes don't break existing functionality and add appropriate test cases if necessary.
6. **Commit and Push:** Commit your changes and push them to your forked repository.
```bash
git commit -m "Add: Your contribution description"
git push origin feature/new-feature
```
7. **Create a Pull Request:** Open a pull request from your forked repository's branch to the main repository's branch. Provide a clear description of your changes and their purpose.
## **Author**
The `check-online-offline` package is developed by [Rajat Rawal](https://github.com/rajatrawal). Connect with the author on Linkedin: [Rajat Rawal](https://www.linkedin.com/in/rajat-rawal/).
For any questions or inquiries, you can also reach out via [email](mailto:rwlrajat@gmail.com).
---