docs: add for new hooks

docs/src/pages/_meta.json

@@ -46,15 +46,18 @@
   "use-error-boundary": {},
   "use-intersection": {},
   "use-is-client": {},
+  "use-is-online": {},
   "use-isomorphic-layout-effect": {},
   "use-local-storage": {},
   "use-media-query": {},
+  "use-page-visibility": {},
   "use-retimer": {},
   "use-session-storage": {},
   "use-singleton": {},
   "use-stable-handler-only-when-you-know-what-you-are-doing-or-you-will-be-fired": {
     "title": "useStableHandler"
   },
+  "use-typescript-happy-callback": {},
   "use-uncontrolled": {},
   "-- separator components": {
     "type": "separator",

docs/src/pages/use-is-online.mdx

@@ -0,0 +1,19 @@
+---
+title: useIsOnline
+---
+
+# useIsOnline
+
+import ExportMetaInfo from '../components/export-meta-info';
+
+<ExportMetaInfo />
+
+Simple React Hook for checking if you're connected to the internet. It uses `useSyncExternalStore` under the hood to support React 18 concurrent rendering and server-side rendering.
+
+## Usage
+
+```tsx copy
+import { useIsOnline } from 'foxact/use-is-online';
+
+useIsOnline(); // Returns a boolean value
+```

docs/src/pages/use-page-visibility.mdx

@@ -0,0 +1,19 @@
+---
+title: usePageVisibility
+---
+
+# usePageVisibility
+
+import ExportMetaInfo from '../components/export-meta-info';
+
+<ExportMetaInfo />
+
+Simple React Hook for checking if the app is in the foreground or background. It uses `useSyncExternalStore` under the hood to support React 18 concurrent rendering and server-side rendering.
+
+## Usage
+
+```tsx copy
+import { usePageVisibility } from 'foxact/use-page-visibility';
+
+usePageVisibility(); // Returns a boolean value
+```

docs/src/pages/use-typescript-happy-callback.mdx

@@ -0,0 +1,49 @@
+---
+title: useTypeScriptHappyCallback
+---
+
+# useTypeScriptHappyCallback
+
+import ExportMetaInfo from '../components/export-meta-info';
+
+<ExportMetaInfo />
+
+`@types/react` [uses a more general type (`Function`) to avoid breaking changes](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/52873#issuecomment-845806435) for `useCallback`. `useTypeScriptHappyCallback` declared a more specific types, allows TypeScript to infer the types of callback's arguments and return value.
+
+## Usage
+
+```tsx copy
+import { useTypeScriptHappyCallback } from 'foxact/use-typescript-happy-callback';
+
+<input
+  onChange={useTypeScriptHappyCallback(
+    (event) => {
+  // ^? React.ChangeEvent<HTMLInputElement>
+      console.log(event.target.value); // Here the type of `event` is inferred
+    },
+    []
+  )}
+/>
+```
+
+Note that [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) requires extra configuration in order to check dependency array for third-party hooks:
+
+```json filename=".eslintrc.json" copy
+{
+  "rules": {
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        "additionalHooks": "useTypeScriptHappyCallback"
+      }
+    ]
+  }
+}
+```
+
+But if you do not want to configure it, `foxact/use-typescript-happy-callback` also provides another named export `useCallback` as an alias of `useTypeScriptHappyCallback`:
+
+```diff
+- import { useCallback } from 'react';
++ import { useCallback } from 'foxact/use-typescript-happy-callback';
+```