docs: add docs for several hooks (#11)

Author: mrcaidev

docs/.vitepress/config.ts

@@ -39,6 +39,164 @@ export default defineConfig({
           },
         ],
       },
+      {
+        text: "Hooks",
+        base: "/hooks",
+        items: [
+          {
+            text: "useAsyncEffect",
+            link: "/use-async-effect",
+          },
+          {
+            text: "useBoolean",
+            link: "/use-boolean",
+          },
+          {
+            text: "useClickOutside",
+            link: "/use-click-outside",
+          },
+          {
+            text: "useClipboardText",
+            link: "/use-clipboard-text",
+          },
+          {
+            text: "useConstFn",
+            link: "/use-const-fn",
+          },
+          {
+            text: "useConst",
+            link: "/use-const",
+          },
+          {
+            text: "useCounter",
+            link: "/use-counter",
+          },
+          {
+            text: "useDebounceEffect",
+            link: "/use-debounce-effect",
+          },
+          {
+            text: "useDebounce",
+            link: "/use-debounce",
+          },
+          {
+            text: "useDocumentEventListener",
+            link: "/use-document-event-listener",
+          },
+          {
+            text: "useDocument",
+            link: "/use-document",
+          },
+          {
+            text: "useElementSize",
+            link: "/use-element-size",
+          },
+          {
+            text: "useEventListener",
+            link: "/use-event-listener",
+          },
+          {
+            text: "useFocusTrap",
+            link: "/use-focus-trap",
+          },
+          {
+            text: "useHover",
+            link: "/use-hover",
+          },
+          {
+            text: "useInterval",
+            link: "/use-interval",
+          },
+          {
+            text: "useIsMounted",
+            link: "/use-is-mounted",
+          },
+          {
+            text: "useKeydown",
+            link: "/use-keydown",
+          },
+          {
+            text: "useLatest",
+            link: "/use-latest",
+          },
+          {
+            text: "useLocalStorage",
+            link: "/use-local-storage",
+          },
+          {
+            text: "useMediaQuery",
+            link: "/use-media-query",
+          },
+          {
+            text: "useMount",
+            link: "/use-mount",
+          },
+          {
+            text: "usePrevious",
+            link: "/use-previous",
+          },
+          {
+            text: "useRerender",
+            link: "/use-rerender",
+          },
+          {
+            text: "useSafeLayoutEffect",
+            link: "/use-safe-layout-effect",
+          },
+          {
+            text: "useSessionStorage",
+            link: "/use-session-storage",
+          },
+          {
+            text: "useTextSelection",
+            link: "/use-text-selection",
+          },
+          {
+            text: "useTheme",
+            link: "/use-theme",
+          },
+          {
+            text: "useThrottleEffect",
+            link: "/use-throttle-effect",
+          },
+          {
+            text: "useThrottle",
+            link: "/use-throttle",
+          },
+          {
+            text: "useTimeout",
+            link: "/use-timeout",
+          },
+          {
+            text: "useTitle",
+            link: "/use-title",
+          },
+          {
+            text: "useToggle",
+            link: "/use-toggle",
+          },
+          {
+            text: "useUnmount",
+            link: "/use-unmount",
+          },
+          {
+            text: "useUnsafeOnceEffect",
+            link: "/use-unsafe-once-effect",
+          },
+          {
+            text: "useUpdate",
+            link: "/use-update",
+          },
+          {
+            text: "useWindowSize",
+            link: "/use-window-size",
+          },
+          {
+            text: "useWindow",
+            link: "/use-window",
+          },
+        ],
+      },
     ],
     socialLinks: [
       {

docs/hooks/use-async-effect.md

@@ -0,0 +1,28 @@
+# useAsyncEffect
+
+Same as `useEffect`, but the effect can be asynchronous.
+
+```ts
+useAsyncEffect(async () => {
+  await fetch("https://api.example.com/data");
+}, []);
+```
+
+## Parameters
+
+### effect
+
+- Type: `() => Promise<void>`
+
+The asynchronous effect to run.
+
+> [!NOTE]
+>
+> Destructor is not yet supported. The cleanup function returned by the effect will be ignored and discarded.
+
+### deps
+
+- Type: `DependencyList`
+- Default: `undefined`
+
+The dependencies of the effect, just like in `useEffect`.

docs/hooks/use-boolean.md

@@ -0,0 +1,54 @@
+# useBoolean
+
+Use a boolean value.
+
+```ts
+const { value, set, setTrue, setFalse, toggle, reset } = useBoolean();
+```
+
+## Parameters
+
+### initialValue
+
+- Type: `boolean`
+- Default: `false`
+
+The initial value of the boolean.
+
+## Returns
+
+### value
+
+- Type: `boolean`
+
+The current value of the boolean.
+
+### set
+
+- Type: `Dispatch<SetStateAction<boolean>>`
+
+Set the value to any boolean.
+
+### setTrue
+
+- Type: `() => void`
+
+Set the value to `true`.
+
+### setFalse
+
+- Type: `() => void`
+
+Set the value to `false`.
+
+### toggle
+
+- Type: `() => void`
+
+Toggle the value, that is, to set the value to `true` if it is currently `false`, and to `false` if it is currently `true`.
+
+### reset
+
+- Type: `() => void`
+
+Reset the value to the initial value.

docs/hooks/use-click-outside.md

@@ -0,0 +1,25 @@
+# useClickOutside
+
+Listen to click events outside of a node.
+
+```ts
+const modalRef = useRef<HTMLDivElement>(null);
+
+useClickOutside(modalRef, () => closeModal());
+```
+
+## Parameters
+
+### ref
+
+- Type: `RefObject<Node>`
+
+The ref of the node to listen for click events outside of.
+
+### callback
+
+- Type: `(event: MouseEvent, target: Node) => void`
+
+The function to call when a click event occurs outside of the node.
+
+The first argument is the click event, and the second argument is the target node contained inside the `ref`.

docs/hooks/use-clipboard-text.md

@@ -0,0 +1,53 @@
+# useClipboardText
+
+Use the text on the user's clipboard.
+
+```ts
+const { text, error, write } = useClipboardText();
+```
+
+## Parameters
+
+### options
+
+- Type: `UseClipboardTextOptions`
+- Default: `{}`
+
+The options to configure the hook.
+
+## Options
+
+### readOnMount
+
+- Type: `boolean`
+- Default: `true`
+
+Whether to immediately read the user's clipboard when the hook is mounted.
+
+If set to `false`, the returned `text` will be its default value, that is, `""`.
+
+When this option is changed from `false` to `true`, the hook will read the user's clipboard.
+
+## Returns
+
+### text
+
+- Type: `string`
+- Default: `""`
+
+The text on the user's clipboard.
+
+### error
+
+- Type: `Error | null`
+- Default: `null`
+
+The error that occurs while reading from or writing to the user's clipboard.
+
+After any successful read or write operation, `error` will be reset to `null`.
+
+### write
+
+- Type: `(text: string) => Promise<void>`
+
+Write text to the user's clipboard.

docs/hooks/use-const-fn.md

@@ -0,0 +1,23 @@
+# useConstFn
+
+Memoize a function, which stays the same across rerenders.
+
+```ts
+const fn = useConstFn(() => {
+  doSomething();
+});
+```
+
+## Parameters
+
+### fn
+
+- Type: `Function`
+
+The function to memoize.
+
+## Returns
+
+- Type: `Function`
+
+The memoized function.

docs/hooks/use-const.md

@@ -0,0 +1,21 @@
+# useConst
+
+Memoize a value, which stays the same across rerenders.
+
+```ts
+const value = useConst(() => expensiveCompute());
+```
+
+## Parameters
+
+### factory
+
+- Type: `() => T`
+
+A function that computes the value to be memoized.
+
+## Returns
+
+- Type: `T`
+
+The memoized value.