diff --git a/README.md b/README.md
index 7eb6fae14..b173da9ae 100644
--- a/README.md
+++ b/README.md
@@ -60,6 +60,7 @@ import ReactDOM from 'react-dom';
* [`useClickOutside`](#useclickoutside)
* [`useFetch`](#usefetch)
* [`useInterval`](#useinterval)
+* [`useNavigatorOnLine`](#usenavigatoronline)
* [`useSSR`](#usessr)
* [`useTimeout`](#usetimeout)
@@ -462,6 +463,57 @@ ReactDOM.render(, document.getElementById('root'));
[⬆ Back to top](#contents)
+### useNavigatorOnLine
+
+A hook that returns if the client is online or offline.
+
+- Create a function, `getOnLineStatus`, that uses the `NavigatorOnLine` web API to get the online status of the client.
+- Use the `React.useState()` hook to create an appropriate state variable, `status`, and setter.
+- Use the `React.useEffect()` hook to add listeners for appropriate events, updating state, and cleanup those listeners when unmounting.
+- Finally return the `status` state variable.
+
+```jsx
+const getOnLineStatus = () =>
+ typeof navigator !== "undefined" && typeof navigator.onLine === "boolean"
+ ? navigator.onLine
+ : true;
+
+const useNavigatorOnLine = () => {
+ const [status, setStatus] = React.useState(getOnLineStatus());
+
+ const setOnline = () => setStatus(true);
+ const setOffline = () => setStatus(false);
+
+ React.useEffect(() => {
+ window.addEventListener("online", setOnline);
+ window.addEventListener("offline", setOffline);
+
+ return () => {
+ window.removeEventListener("online", setOnline);
+ window.removeEventListener("offline", setOffline);
+ };
+ }, []);
+
+ return status;
+};
+```
+
+
+Examples
+
+```jsx
+const StatusIndicator = () => {
+ const isOnline = useNavigatorOnLine();
+
+ return You are {isOnline ? "online" : "offline"}.;
+};
+
+ReactDOM.render(, document.getElementById("root"));
+```
+
+
+ [⬆ Back to top](#contents)
+
### useSSR
A hook that checks if the code is running on the browser or the server.
@@ -1632,8 +1684,6 @@ ReactDOM.render(, document.getElementById('root'));
### RippleButton
-### RippleButton
-
Renders a button that animates a ripple effect when clicked.
- Define some appropriate CSS styles and an animation for the ripple effect.
diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json
index 555d19b80..5b2c389d0 100644
--- a/snippet_data/snippetList.json
+++ b/snippet_data/snippetList.json
@@ -273,7 +273,7 @@
"type": "snippetListing",
"title": "RippleButton",
"attributes": {
- "text": "### RippleButton\n\nRenders a button that animates a ripple effect when clicked.\n\n- Define some appropriate CSS styles and an animation for the ripple effect.\n- Use the `React.useState()` hook to create appropriate variables and setters for the pointer's coordinates and for the animation state of the button.\n- Use the `React.useEffect()` hook to change the state every time the `coords` state variable changes, starting the animation.\n- Use `setTimeout()` in the previous hook to clear the animation after it's done playing.\n- Use the `React.useEffect()` hook a second time to reset `coords` whenever the `isRippling` state variable is `false.`\n- Handle the `onClick` event by updating the `coords` state variable and calling the passed callback.\n- Finally, render a `