Added useTitle, useIsOnline hooks

Author: aldrinpvincent

.gitignore

@@ -3,6 +3,7 @@ docs/node_modules
 docs/.docusaurus
 docs/build
 docs/src/hooks
+docs/blog
 dist
 example
-test
+test

README.md

@@ -12,9 +12,9 @@ yarn add react-use-custom-hooks
 # Usage
 
 ```ts
-import { useSafeState } from 'react-use-custom-hooks';
+import { useDebounce } from 'react-use-custom-hooks';
 ```
 
-# Demo
+# Documentation and demo
 
 https://react-use-custom-hooks.vercel.app/

docs/docs/useIsOnline.md

@@ -0,0 +1,39 @@
+# useIsOnline
+
+A hook for detecting network status of the user. This hook will return a boolean value indicating whether the user is online or not. The value will be automatically updated when the user's network status changes.
+
+<pre>{`import {useIsOnline} from 'react-use-custom-hooks';`}</pre>
+
+:::caution
+The hook works based on value of `navigator.onLine` property, so this hook returns `true` does not always mean the user connected to the internet, it can also just a connection to some network.
+
+If the browser doesn't support `navigator.onLine`, the hook will return `false/undefined`.
+
+Early versions of Chrome and Safari always reported "true" for navigator.onLine
+
+Desktop Firefox responds to the status of its "Work Offline" mode. If not in that mode, `navigator.onLine` is always true, regardless of the actual network connectivity status. See [ firefox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=654579) for details.
+
+:::
+
+### Usage example
+
+```typescript
+const isOnline: boolean = useIsOnline();
+```
+
+### Playground
+
+Try disconnecting and then connecting your network and see the value changes.
+
+```jsx live
+function IsOnlineExample(props) {
+  const isOnline = useIsOnline();
+  return <>User is online: {isOnline.toString()}</>;
+}
+```
+
+### API
+
+```typescript
+export function useIsOnline(): Boolean;
+```

docs/docs/useSafeState.md

@@ -1,5 +1,13 @@
 # useSafeState
 
+:::caution This hook will be deprecated soon
+
+The warning from react when you set state on unmounted component will be removed from React 18 onwards since there is no actual memory leak in case of promises and the warning is misleading in those scenarios. Also future version of react offer a feature that lets you preserve DOM and state even when the component is not visible, but disconnect its effects. That might not work will with the implementation of this hook.
+
+See detailed discussion here - https://github.com/reactwg/react-18/discussions/82
+
+:::
+
 A memory safe version of react's `useState` hook. In react, on way memory leak occurs when `setState` operation performed on an unmounted component and it happens mostly with asynchronous operation like AJAX calls.
 
 For example, if the user initiated an AJAX call and navigated away from tha page before the call is returned, the component will get unmounted and when the api call is fulfilled, the `setState` will be performed on the unmounted component causing a memory leak.

docs/docs/useTitle.md

@@ -0,0 +1,50 @@
+# useTitle
+
+A hook to manage title value of document.
+
+<pre>{`import {useTitle} from 'react-use-custom-hooks';`}</pre>
+
+### Usage example
+
+```typescript
+useTitle('My title');
+```
+
+### Playground
+
+You can pass static value or computed value, state or prop to `useTitle` hook. The title of the document will get's updated whenever the value changes. Also you can restore the previous title if the component using this hook unmounts. Pass `restoreOnUnmount` value `true` in `options` object to configure the behavior.
+
+```jsx live
+function TitleExample(props) {
+  const [title, setTitle] = useState('My Title!');
+  useTitle(title);
+  return (
+    <>
+      <input
+        type="text"
+        value={title}
+        onChange={e => setTitle(e.target.value)}
+      />
+    </>
+  );
+}
+```
+
+### API
+
+```typescript
+interface Options {
+  restoreOnUnmount?: boolean;
+}
+
+export function useTitle(
+  title: string,
+  options: Options = DEFAULT_OPTIONS
+): void;
+```
+
+#### Options
+
+| Property         | Description                                    | Type      | Default |
+| ---------------- | ---------------------------------------------- | --------- | ------- |
+| restoreOnUnmount | Indicate to restore the title value on unmount | `boolean` | false   |

docs/docusaurus.config.js

@@ -51,10 +51,10 @@ const config = {
         playgroundPosition: 'bottom',
       },
       navbar: {
-        // title: 'Hooks studio',
+        title: 'React Use Custom Hooks',
         logo: {
-          alt: 'Hooks studio logo',
-          src: 'img/h2.svg',
+          alt: 'Home page of react use custom hooks',
+          src: 'img/logo.png',
         },
         items: [
           // {

docs/src/components/HookDetails.js

@@ -18,7 +18,7 @@ export default function HookDetails() {
           Usage
         </h3>
         <pre>
-          {`import {useSafeState} from 'react-use-custom-hooks';`}
+          {`import {useDebounce} from 'react-use-custom-hooks';`}
         </pre>
       </div>
     </section>

docs/src/pages/index.module.css

@@ -26,8 +26,6 @@
   background: rgb(255, 45, 116);
   color: white !important;
 }
-/* .buttons a:hover {
-    transform: translate3d(0px, -2px, 0px);
-    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px;
-    transition: all 150ms linear 0s;
-} */
+.buttons a:hover {
+  background: #e24053;
+}

docs/src/theme/ReactLiveScope/index.js

@@ -1,12 +1,12 @@
 
 import React from 'react';
-import { useDebounce, useSafeState, useIsMounted, usePrevious, useLegacyState } from "react-use-custom-hooks";
+import { useDebounce, useSafeState, useIsMounted, usePrevious, useLegacyState, useTitle, useIsOnline } from "react-use-custom-hooks";
 
 // Add react-live imports you need here
 const ReactLiveScope = {
   React,
   ...React,
-  useDebounce, useSafeState, useIsMounted, usePrevious, useLegacyState
+  useDebounce, useSafeState, useIsMounted, usePrevious, useLegacyState, useTitle, useIsOnline
 };
 
 export default ReactLiveScope;

docs/static/img/favicon.ico

@@ -3,5 +3,15 @@ import { useSafeState } from './useSafeState';
 import { useIsMounted } from './useIsMounted';
 import { usePrevious } from './usePrevious';
 import { useLegacyState } from './useLegacyState';
+import { useTitle } from './useTitle';
+import { useIsOnline } from './useIsOnline';
 
-export { useDebounce, useSafeState, useIsMounted, usePrevious, useLegacyState };
+export {
+  useDebounce,
+  useSafeState,
+  useIsMounted,
+  usePrevious,
+  useLegacyState,
+  useTitle,
+  useIsOnline,
+};

docs/static/img/h2.svg

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+import { useState } from 'react';
+import { useEffect } from 'react';
+
+export function useIsOnline(): Boolean {
+  const isNavigatorOnLineDefined: boolean =
+    typeof window.navigator.onLine === 'boolean';
+  const [isOnline, setIsOnline] = useState<boolean>(window.navigator.onLine);
+
+  const onStatusChange = useCallback(
+    () => setIsOnline(window.navigator.onLine),
+    []
+  );
+
+  useEffect(() => {
+    if (!isNavigatorOnLineDefined) {
+      return;
+    }
+    window.addEventListener('online', onStatusChange);
+    window.addEventListener('offline', onStatusChange);
+
+    return () => {
+      window.removeEventListener('online', onStatusChange);
+      window.removeEventListener('offline', onStatusChange);
+    };
+  }, []);
+
+  return isOnline;
+}

docs/static/img/logo.png

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+
+interface Options {
+  restoreOnUnmount?: boolean;
+}
+
+const DEFAULT_OPTIONS: Options = {
+  restoreOnUnmount: false,
+};
+
+export function useTitle(
+  title: string,
+  options: Options = DEFAULT_OPTIONS
+): void {
+  const isDocumentDefined = typeof document !== 'undefined';
+  const originalTitle = useRef(isDocumentDefined ? document.title : '');
+
+  useEffect(() => {
+    if (!isDocumentDefined) return;
+    if (document.title !== title) document.title = title;
+    return () => {
+      if (options?.restoreOnUnmount) document.title = originalTitle.current;
+    };
+  }, [title]);
+}